・コーディングってどんな作業で何やるの？
・コーディング作業の一連の流れを知りたい。
・実際の案件事例で進め方を理解したい。
- 完成したオリジナルデザインをHTML/CSS/jQueryでコーディングしていく流れが７つのステップで分かる
実体験をベースに記事を作成していますので参考になれば幸いです。
コーディング手順をオリジナルサイト制作事例から7ステップでご紹介
「Webデザイン制作」手順を制作事例から６ステップでご紹介【Web制作の流れ③】に続いて次は「コーディング」です。
Web制作（オリジナルサイト制作）の全体の流れは
- その１「企画」
- その２「設計」
- その３「制作：デザイン」
- その４「制作：コーディング」
- その５「制作：WordPress」
となっておりこの記事はその４「制作：コーディング」となります。
その３「制作：デザイン」でデザインが完成しました。デザイン完成してもphotoshopのハリボテ画像なのでWebサイトでこれが見れるようにしないといけません。
この記事ではphotoshopハリボテ画像がWebサイト（ブラウザ）で表示されるにはどうしたらいいか、つまりはコーディング作業はどうしていくのか、を７ステップにわけて書いてみます。
「コーディング」の７ステップ
コーディングはざっくり以下の７ステップで考えます。
- ステップ１：ファイル、フォルダを作る
- ステップ２：ブラウザ表示させたいデザインのレイアウトを確認する
- ステップ３：HTMLを書いて構造化する
- ステップ４：CSSでデザイン（見た目）を整える
- ステップ５：JavascriptもしくはjQueryで動きをつける
- ステップ６：画像（写真、イラストデータ）をフォルダに格納する
- ステップ７：レスポンシブ対応にする
コーディングしていくトップページ画像
このトップページをコーディングしていく流れをこの記事で書いていきます。
ステップ１：ファイル、フォルダを作る
①コーディングデータや画像データを格納するフォルダを作ります。
②そして、HTMLやCSS、Javascriptのファイルを作ります。
パソコン内のどこでもいいのでフォルダとファイルを作っていきます。こんな感じ。
「coding」フォルダを作ってその中に
HTMLファイル「index.html」
CSSフォルダを作ってファイルは「style.css」
Javascriptフォルダを作ってファイルは「script.js」
画像データフォルダは「images」フォルダ内に格納
という構造で作ります。（画像の「casestudy」「clumn」フォルダとかは下層ページのHTMLファイルを入れているフォルダです）
index.html、style.css、script.jsはテキストエディタから新規作成で空のファイルを作っておきます。
ステップ２：ブラウザ表示させたいデザインのレイアウトを確認する
完成デザインからコーディングを始めるために構造を整理します。こんな感じです。
この図の内容をもとにコーディング（HTMLマークアップ作業）を開始します。
ステップ３：HTMLを書いて構造化する
ここからコーディング作業開始です。HTMLというHyperText Markup Language（ハイパーテキストマークアップ言語）を書いていきます。
HTMLでできることは、サイトの文章を構造化することです。
まあなんだかよく分からない説明なので、なんでもいいのでWebサイトを開いて右クリックをして「ページのソースを表示」を選択するとでてくるものがHTMLです。ソースコードといってこれを書いていくわけです。
HTMLは文書の構造をまとめていくものなのでCSS（スタイルシート）を適用させないでHTMLだけだとこうなります。要素が縦に並んでるだけです。
エディタを開く
コーディング作業をするには「エディタ」が必要。これをつかってHTMLファイルやCSSファイルを作っていきます。なので、まずエディタを開きましょう。エディタの紹介は前の記事に書いてますので参考にしてみてください。
Web制作を始めるために最低限必要なツール６選【最初にそろえた道具たち】#コーディングするためにはまず「エディタ」を用意する
HTMLタグを書いていく
＜＞で囲まれた記号を書いていきます。タグって言います。文書に意味付けします。
<html></html>：HTML文書指定
<head></head>：文書のヘッダ（文書の説明、タイトルなどの情報）を指定する
<body></body>：文書の本文指定
<p></p>：段落を指定する
<h1></h1>～<h6></h6>：文書の見出しを指定する
こんなのを書いていきます。
最低限必要なHTML文書は下の左図の通り。右が実際ブラウザ表示された内容。
headタグの中身を書いていく
HTMLはheadタグとbodyタグにわかれます。
- headタグ →<head></head>で挟まれたところ。直接見えない。検索エンジンやブラウザに向けて指示を書く
- bodyタグ →<body></body>で挟まれたところ。Webサイトから見える内容を書く
headタグ内には主にmetaタグとlinkタグというのを入れます。
ここはサルワカで分かりやすく書いていて必要なタグが書かれてます。
head内に書くべきタグを総まとめ：SEO対策に有効なものは？
bodyタグの中身を書いていく
<body></body>
の中身を書いていくことでWebサイトができていきます。ステップ２で確認したレイアウトの通りにタグを記述していきます。
こんな感じで枠組みを作ったらさらにそれぞれの中身を書いていきます。
中身の構成次第でいろんなタグを書いていきます。
- 見出しタグ h1,h2,h3,h4,h5,h6
- リスト表示 ulタグ、olタグ
- リンクの出発点や到達点を示すタグ aタグ
- 1つの段落であることを示すタグ pタグ
タグ内にclassやid（上図に書いたような）を記述することでCSSでその部分を指定してデザインやレイアウトを作っていくことができます。
htmlの文法チェックしたり見出し階層をチェックする（バリデーション）
作成したサイトのHTMLが、ウェブ標準に従って正しく記述されているかどうかチェックしたり、見出しの階層が正しく構成されているか確認します。
HTMLを正しく記述することはSEOの観点からも重要。確認ツールをバリデーションツールっていいます。
HTMLエラーチェッカー
これは制作会社とのやり取りのときに教えてもらいました。chrome拡張機能です。調べたいページをchromeで開いて右上のアイコンをクリックするだけ。
W3C Markup Validation Service
Web技術の標準化を行う非営利団体のW3Cが提供している文法チェックツール。URLを入力してcheckをクリックで確認でき、htmlをまるっと貼り付けて確認することも可能。
W3C Markup Validation Serviceはこちら
HTML5 Outliner
見出しの階層を確認できるツール。表示結果がきれいな見出し階層になっていない場合は検索ロボットにページの構成が伝わりにくくなるので要チェックです。
ステップ４：CSSでデザイン（見た目）を整える
- 色をつける
- レイアウトを整える（要素を並べたり、中央寄せしたり）
- 大きさ（縦横幅）を調整する
- マウスカーソルを合わせたときに色をつけたり動きをつけたりする
- ２D、３D的な動きをつける（CSSアニメーション）
ステップ５：JavascriptもしくはjQueryで動きをつける
デザイン、レイアウトがうまくできたらOKかというとWebサイトに動きつけたいですよね。
例えばスマホのハンバーガーメニュー（左図の右上の三本線がハンバーガーみたいでこれをタップするとメニューが出てくる）
ドロップダウンメニュー（事業内容というナビをクリックすると下層ページへのリンクが分かりやすく出てくる）
あとは、画像をスライドさせたりトップへ戻るボタンを作ったりとまあ色々できるわけですがこれらはCSSでは作れないわけです。そこでjavascriptというプログラミング言語で作っていきます。javascript操れるぜ、っていう人はガリガリjavascriptを書いていきます。
しかし！javascriptは難しい！ググってなんとか作り上げることもできるけれどももっと簡単に作りたい！Webデザイナーだからプログラミングはそこまでできない！と思ったらどうするか。
そこで、jQueryを使います。
javascriptのライブラリ（javascriptパーケージセットみたいな感じ）を使うと超簡単にWebサイトに動きがつけられる、という感じ。
script.jsというファイルを作ってそこに内容書いていきます。（index.htmlの中にjQueryの記述を書いた方がWebサイトを読み込むスピードが速くなるということもありますがメンテナンス性を考えてここではファイル分けます）
activeっていうclassが自動で新たについて
header-navは隠れてたけど（元々表示されない指定をしている）ゆっくりしたスピードで表示させる
みたいな指定をするとハンバーガーメニューが作れます。
あとは、jQueryはライブラリな訳でパッケージの元となるものが必要。
なので、
- jQueryの公式サイトからjquery.min.jsをダウンロードして、それをサーバーに配置して読み込むというやり方
- GoogleのCDNからjQueryを読み込むというやり方
があるのでどちらかを選びます。※CDNとは「Content Delivery Network」の略。同一のコンテンツを、 多くのユーザーのパソコンに効率的に配布するために使われる仕組み。
- GoogleのCDNからjQueryを読み込むというやり方
だとindex.htmlの最後のfooterタグの後に
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
書くだけ。簡単。
詳しくは【jQuery入門】CDNを読み込む方法と使い方まとめ！に書いています。
最後に、作ったscript.jsをリンクさせればOK。
ステップ６：画像（写真、イラストデータ）をフォルダに格納する
ロゴとか別で作った画像とかをそのままWebサイトで表示させたい場合、画像フォルダを作ってリンクさせます。
ステップ７：レスポンシブ対応にする
スマホの時にスマホ用画面になるようにする。ということをしないと今のWebサイトはいけません。レスポンシブ対応って言います。
モバイルファーストといわれる世の中なのでスマートフォンでもストレスなく利用できるデザインにすることが必要です。ってまあスマホで今いろんなサイトみますよね、パソコンで見るそのままの画面がスマホで出てきたら見にくくて仕方がない。
なので、画面の横幅がスマホ画面くらいになったらデザイン変えましょう、という指示をスタイルシート（style.css）に書いていきます。
@media screen and (max-width: 640px) {
というのをstyle.cssに追加で書いていきます。左がパソコンで右のスマホ画面にしたい。
わけだから横幅が640ピクセル以下になった場合は、まずパソコンで表示されているナビゲーションは全て消してハンバーガーメニューと分かる線三本表示させるか、みたいなのをスタイルシート（style.css）の@media〜{・・・ }の・・・の中に書いていく、ということ。
これでデザインをWebサイトで表示させていきます。
まとめ：ピクセルパーフェクトでコーディングしよう
コーディングはざっくり以下の７ステップで考えました。
- ステップ１：ファイル、フォルダを作る
- ステップ２：ブラウザ表示させたいデザインのレイアウトを確認する
- ステップ３：HTMLを書いて構造化する
- ステップ４：CSSでデザイン（見た目）を整える
- ステップ５：JavascriptもしくはjQueryで動きをつける
- ステップ６：画像（写真、イラストデータ）をフォルダに格納する
- ステップ７：レスポンシブ対応にする
完成デザインからWebサイトにそれを表示させるためにコーディングするわけです。
でもコーディングしていくと完成デザインとちょっと位置がずれたり大きさが変わったりしていくこともあります。そこをバッチリ完成デザイン通りにコーディングできるようにしていきます。
それをピクセルパーフェクトと言います。1ピクセルもズラさずにパーフェクトな再現をする、という意味らしい。
制作会社案件などでコーディング作業を受注した時に、完成デザインと全く同じにしないといけません。ちょっとくらいずれてもいいか、というのは自分でデザインをした場合ならちょっとくらいならいいかもですが、制作会社案件とかだとそのちょっとくらいは許されません。
なので完璧にデザイン通りにコーディングする、という意識を持ってコーディング作業をしていくことが必要になります。
これで作ったハリボテデザイン画像がWebサイトで表示できるようになります。
次はこのシリーズ最後の、「WordPressオリジナルテーマ化」手順を制作事例から８ステップでご紹介【Web制作の流れ⑤】に続きます。
この記事はここまでです。
スキル０からオリジナルデザインのサイト制作ができるようになるまでの過程、
制作会社に営業するための「営業メールの作り方」「営業アポイントリストフォーマット」なども盛り込んでます。
実践的・網羅的な内容にしていますのでこれからWeb制作・Webデザインを始めようという方にオススメのnoteです♪
【note】スキル実績人脈０のアラフォー男がWeb制作会社に営業して副業収益化した具体的な手順