岡村 岳岡村 岳 / 2022年3月18日

Webサイトコーディングの進め方

デザイン・開発・コーディングもしているN’s createsのWebサイトを作成するにあたってのコーディングの流れをここで紹介できたらなと思います。

デザイン共有

デザイナーさんから実装するデザインの説明をしていただいたり共有していただきます。

主にデザインを確認する上で使うソフトは下記になります。

  • Sketch

  • Figma

  • Invision

  • Photoshop

  • Illustrator

  • XD

上記の中で弊社は主にSketchを使用することが多いです。

コーディングを進める上で必要な画像の書き出しやデータの確認などをします。

デザイナーさんと会話して細かく説明を受けていただき実装開始したりします。

開発環境

Webサイトコーディングをする上で弊社はWordPressを使用することが多いのでDBや管理画面の設定などもすることがあります。

https://ja.wordpress.org/

WordPressの環境を立ち上げる際に「local by flywheel」というツールを使っています。

https://localwp.com/

PHPやWordPressのバージョンなどを立ち上げる際に選択できたりするのでとても便利です。

開発環境の時点でつまづくと時間がかかってしまうことがあるので慎重になってしまいます。

また、backlogなどのタスク管理のツールにてタスク分けをして期限日や詳細をあらかじめまとめることもします。

コーディング

実際に作業を進めていきます。

わからないところがあれば常に調べながら進めたり、周りの方に聞いたりして日々試行錯誤して進めています。

最近ではvueを取り入れて作業を進めているので僕は常に勉強しながら作業しているような感じです。

https://jp.vuejs.org/index.html

あまり特定のサイトばかりで調べることはありませんが、やはりQuiitaやcodepenなど有名なサイトを参考にすることが多いです。

確認

コーディング後もブラウザやレスポンシブでの表示崩れがないかチェックします。

開発環境はMac OSですが、WindowsOSでの確認やiOS・Androidなどの機種での確認、ChromeやEdgeなどのブラウザでの確認を一通り終えて作業を終えます。

特にブレイクポイントによっては改行の調整が多く大変です。

今後の開発

WebサイトコーディングからWebシステムやアプリなどのコーディングに変わってきてVueやPHPを触ることが増えてきたりしました。

日々やることが難しくなってきていると実感する中でお客さんの期待に応えられる成果物を作れるよう日々精進していきたいと思っております。

同じテーマの記事

齋藤 公一齋藤 公一 / 2024年3月26日

業務システムこそデザインにこだわった方が良い理由

山本 明子山本 明子 / 2024年3月22日

肩首伸ばしてスッキリ!座りながらできるストレッチ

本田 顕本田 顕 / 2024年3月13日

マック・ミラーが最高

西山秀治西山秀治 / 2024年2月16日

PHP8について

お問い合わせ

BtoBサービスのデザイン・開発に関することならお気軽にご相談ください

一緒に働く仲間を募集しています

採用情報

デザイナー、エンジニア共に募集をしています。

パートナー募集

現在は主に開発領域に対して募集しています。