N'sCreates ロゴ

UX/UIデザインに強いWebシステム開発会社。神戸・三木から全国対応します。

岡村 岳岡村 岳 / 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を触ることが増えてきたりしました。

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

同じテーマの記事

齋藤 公一齋藤 公一 / 2022年6月24日

全体像を整理して質とスピードをアップ!文章執筆時のアウトライン作成の重要性

本田顕本田顕 / 2022年6月22日

入社1ヶ月の感想と今後の目標

永富咲永富咲 / 2022年6月10日

【 #読書でインプット 】今月読んだUIデザインの本を紹介!

高橋 実玖高橋 実玖 / 2022年6月3日

無料で商用利用可能なアイコン素材サイト!3選

ページ上部へ戻る