デザイン・開発・コーディングもしている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を触ることが増えてきたりしました。

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