Webサイトの構築やったこと大体全部（作成・公開・運用）【初心者向け】
こんにちは。IT企業でデザイナーをしている harahiro です。
先日、初めてWebサイトをデザインからコーディング、公開まで丸々一人で行いました。
普段の業務では、WebのUIデザインを中心に活動していますが、コーディングはエンジニアにお任せしています。コードに触れる機会はレイアウトチェックの際にCSSを少しいじる程度です。
知識不足により、業務の進め方やアウトプットの質に限界を感じ始めたため、サイト構築の勉強を目的として今回の個人サイト制作に至りました。
この記事は、Webコーディング初心者の自分が初めてWebサイトを作ったときに考えたこと、行ったことをまとめたものです。正しい方法、効率的な方法論の紹介を目的とした記事ではありません。
サイトの作り方に悩んでいる人、勉強したい人に向けて、自分の制作過程が少しでも参考になればいいと思い投稿しました。
Webサイトを構成する要素が大体このぐらいあって、こんな感じで動いていて、こんな感じに作っていけばいいのか〜ぐらいに感じてもらえればありがたいです！
前置きが長くなりましたが、今回はこちらのポートフォリオサイトの制作過程をまとめていきたいと思います。
▼作成したサイト
要件をまとめて、作りたいイメージを集めよう
まず初めに、制作するサイトで何を実現したいのかをまとめます。
今回は個人作品を掲載するためのポートフォリオサイトを作りたかったので、以下のように目的と要件をまとめました。
目的：
・作成したクリエイティブが一覧できるポートフォリオサイト。閲覧した人にサイトを通して人物感や作品を知ってもらう。
・（Webサイトの制作を通して、コードに対する理解を深める。）
要件：
・作品が閲覧できる
a. 作品の一覧ページ
b. 作品をカテゴリーで絞り込み
c. 作品を選択すると詳細を表示
・自己紹介ができる
a. 紹介文
b. スキル
c. 写真
・SNSを紹介できる
a. 各SNSへのリンク
・・・・・
次に、まとめた目的・要件を満たす、または参考になりそうなイメージを集めます。
いきなり作り始めても問題ありませんが、大概のUIは既に市場に溢れているので、それらを参考にしないのは非常にもったいないです。実際に会社でイメージを作成する際は、制作時間と同じかそれ以上に調査や参考イメージの収集に時間を取ります。しっかりと参考資料を集めることで、新しいアイデアの着想を得たり、制作物の説得力が格段に上がります。
今回は、以下の2つのサイトの構成を参考にしました。
▼構成を参考にしたサイト
補足：
Webデザインの場合は、デベロッパーツール（後術）の利用により、簡単にサイトの構造や具体的な数値までわかるので、困ったときに参考にできるサイトの存在は重要です。
サイトのUIを作成しよう
サイトの目的・要件を満たすUIを、集めたイメージを参考にしつつ作成していきます。
ちなみに自分はSketchで作成しました。
基本的にはアクセス数の多いSP(Smart Phone) 版をメインとして作成するほうが主流だと思いますが、今回はコードを勉強する側面が強かったため、レイアウトの確認がしやすいPC版を先に作成しました。
また、早くコードを書きたくてウズウズしてしまったため、SP版は大体の構成を頭の中で考えたところで次のフェーズに移りました。
補足：
SP版は画面サイズが小さく掲載要素が自然と絞られるので、UIの優先順位を意識して画面を作りやすいです（不要な要素を盛り込みづらい）。
また、PC版に比べ画面の横幅が狭いため、要素を上から積んで行くだけでもある程度のUIが作成できます。そのため、UIデザインになれていない場合はSP版から考え始めたほうが、要素の整理はしやすいかもです。
ちなみに今回のデザインデータは、上記のワイヤーフレームまでしか作っていません。
画像やアイコンは作成に時間がかかるため、ここでは一旦表示領域のみ確保し、コーディングしながら詳細を詰めていきます。（先ずは一通りサイトを完成させることを目指しました。）
・・・・・
ここで、コーディングに入る前に決めておいた方が良いと思ったUI作成時のポイントをご紹介します。
◾フォントを決める
フォントによって与える印象やサイズ感が変わるので、フォントは早めに選定しておきましょう。
補足：
MacとWindowsでは表示できるフォントが異なるため、同じ印象を与えたければ、両OSに共通で標準インストールされているフォントか、Webフォントの使用を検討する必要があります。
※ SPも基本的には各端末にインストールされているフォントが表示されますが、PCに比べ端末の種類が豊富なため、すべての見え方を統一するためにはWebフォントの使用が必要です。
今回のサイトでは、欧文フォントをHelvetica Neue、和文フォントをMac / Windows 共通で使用できる「游ゴシック」にしました。
▼Webフォントの参考サイト
▼OSを考慮したフォントの参考サイト
◾基本的なルールを決める
フォントや色のパターン、画面サイズが変化したときにどこが固定され、どこが伸びるかなど、基本的なルールを決めておくとコーディングが楽になります。
ただ、具体的な数値は実装しながら調整することも多いので、ここでは細かく決めすぎず、余白、フォントの大・中・小をどうやって使い分けるのかぐらいを考えておくぐらいでも良いと思います。
▼UI（構成）の参考サイト
・・・・・
以上でコーディング前の準備は完了です。
次のセクションでは、Webを構成する言語について触れていきたいと思います。
Webを構成する言語を知ろう
Webサイトを作成する際に使用する言語はいくつかありますが、基本的には以下になります。
ざっくり説明すると、HTMLはサイトの構造、CSSは要素の位置や装飾、JavaScript (jQuery)は操作したときの処理を決めることができる言語です。
ちなみに、jQueryはJavaScriptをより簡単に書けるようにした便利な言語ぐらいに思ってもらえれば大丈夫です。
今回は、サーバサイドの言語は使用していないため、上記のようなクライアントサイドの言語しかふれません。
サーバー？クライアント？という方は下記のサイトが参考になります。
▼Web（構成）の参考サイト
基本的には、HTML ➝ CSS ➝ JavaScript の順にコードを書いていきます。
サイトの骨組みを作ろう (HTML)
ついにやって来ました。楽しみにしていた実装タイムです！
作成したイメージをコードに起こして行きます。
それでは先ずサイトの骨組みとなるHTMLを書いていきます。
どこのページから作っても良いとは思いますが、自分はサイトの一番の見所である作品一覧ページから制作を開始しました。
▼作品一覧ページ（Sketch）
ここから細かいコードについて記述していっても良いのですが、今回の記事では割愛したいと思います。
プログラムの詳細について勉強したい方は以下のサイトがおすすめです。
▼Web学習の参考サイト
自分の書いたコードをリアルタイムに確認しながらコーディングを勉強できるため、非常にわかりやすいです。また、各レッスン前のスライドが丁寧で、とても理解しやすかったです。
ちなみに自分は、HTML、CSS、JavaScript、jQueryのレッスンを修了しています。（PHPも始めたいな...!）
・・・・・
それでは、HTML記述時のポイントを記載していきたいと思います。
◾作成したイメージを参考に構造を決めておく
コーディングしながら考えても良いですが、慣れないうちは先に構造を考えておくと実装がはかどります。
もしイメージを作成しているなら、それを印刷してクラス名や要素の親子関係を書き込んでいくと迷わず進めることができます。
ちなみに、要素の名前の付け方に困った場合は以下のサイトが参考になります。このサイトでは、日本語を入力するとコーディングによく使われる単語に変換してくれます。
▼ネーミング生成ツール
◾先ずはHTMLを書き切る
HTMLとCSSを行ったり来たりしながら書くよりも、先ずはHTMLを書ききってからCSSに移ったほうが、原因の切り分けがしやすいので予想外の事態に対して対処しやすいです。
そこまで時間がかかる作業でもないので、装飾したい気持ちをぐっとこらえて、一旦一気に書ききってしまいましょう。
サイトに装飾を追加しよう (CSS)
次に、記載したHTMLにCSSで装飾していきます。CSS記述時のポイントは以下になります。
◾先にCSSでワイヤーフレームをつくる
CSSを書き始めると楽しくなってしまい、ついつい細部を作り込みそうになりますが、そこは我慢しましょう。先にワイヤーフレームを作成して、サイトの全体像を掴む方が、効率的に開発を進めることができると思います。
先に詳細を作り込みすぎると、修正時の範囲が広くなったり、せっかく作ったパーツを使いたい欲求で不要なこだわりが出てくるので、柔軟に対応しづらくなります。
補足：
CSSで要素の配置が上手くいかない人は、全ての要素にbackground-colorを指定してみましょう！背景がついていると、要素がどのような状態なのかがわかりやすくなるのでおすすめです！
また、ブラウザのデベロッパーツールなどは、コードの変更がリアルタイムに画面に反映されわかりやすいので、積極的に利用していきましょう。
▼デベロッパーツールの参考サイト
◾ Hoverの処理は必ず入れる
ユーザーは、思った以上にどこをClickできるのかわかりません。
CSSでワイヤーフレームを完成させたら、必ず Hover の処理を入れましょう。
また、Clickできる箇所にHoverした際は、マウスカーソルが矢印ではなく指マークになるよう設定しておきましょう。
◾画面サイズの変化を考慮して実装する
実装を開始すると、ついつい自分が使用している端末での見た目を優先しがちですが、それだと各ユーザーへの見た目が担保できません。
UI作成の際に検討した基本的なルールにしたがって、実装の早い段階から画面サイズの可変を意識した作りにしておきましょう。
ちなみに、PC上でいろんな画面サイズを試したい場合は、上記で紹介したブラウザのデベロッパーツールが非常に便利なので、ぜひお試しください。SP版の見た目も確認できます。
◾リセットCSSを使用する
ChromeやSafari、Firefoxなど、各ブラウザにはデフォルトでCSSがセットされています。これにより、同じCSSを適用しているにも関わらず、ブラウザによってスタイルに差分が出てしまうという問題があります。それを解決するのがリセットCSSです。
リセットCSSは、HTMLにインポートするだけで、各ブラウザのCSSをリセットし、ブラウザ間の表示を整えてくれます。
詳しくは以下の記事が参考になります。
▼リセットCSSの参考サイト
サイトにアイコンを追加しよう (作る or フリー素材 or Webアイコンフォント)
Webサイトに使用するアイコンを作成する方法は、大体以下の3つになると思います。
◾自分で作る
IllustratorやPhotoshop、Sketchなどのデザインツールを使用して、自分でアイコンを作成します。
アイコン作成の際は、Googleのマテリアルデザインの考え方などがとても参考になります。
▼アイコン作成の参考サイト
◾フリー素材を利用する
オリジナリティのあるアイコンは自由に作っても良いと思いますが、システムアイコンのような汎用的なアイコンは、既に多くのサイトでリソースが公開されています。
積極的に利用することでかなりの時間短縮になりますので、是非使ってみてください。多くのサイトが無料でアイコンを利用できます。
▼フリーのアイコン素材提供サイト
◾Font Awesome（Webアイコンフォント）を利用する
Font AwesomeはWebアイコンフォントを簡単に利用できるサービスです。img要素やbackground-imageなどでは、自分で予めアイコンを用意してから指定しなくてはいけませんが、Webアイコンフォントでは、コードを少し追記するだけでWeb上に予め用意されたアイコンを表示できるようになります。
自分は今回始めて利用しましたがとても簡単でした。無料の範囲だと使用できるアイコンに制限がありますが、大体のアイコンは使用できるので是非試してみてください。
▼Font Awesomeの公式サイト
▼使い方の参考サイト
サイトに処理を追加しよう (JavaScript [jQuery])
CSSまで完成したら、サイトの静的な部分はほぼ完成です！
今度はそこにClick時やスクロール時など、ユーザーが操作した時に起こる動的な部分を追加していきます。
そういった動的な処理にはJavaScriptを使用します。前述しましたが、jQueryはJavaScriptをより簡単に書けるようにした便利な言語ぐらいに思ってもらえれば大丈夫です。
なので、JavaScriptでできることはjQueryで、jQueryでできることはJavaScriptで大体できます。
・・・・・
JavaScript [jQuery]記述時のポイントは以下になります。
◾アニメーションやスタイルの変更など、CSSで出来ることはできるだけ記述しない
JavaScript を使用するとテキストの入力や表示・非表示の切り替え、スタイルの変更など色んなことができます。
しかし、JavaScript 側に処理内容を持たせすぎると、プログラムの処理に時間がかかりモッサリした遅い動きになってしまいます。
なので、CSSで対応できるアニメーションやスタイルは予めCSSに記述しておき、JavaScript でクラスを着け外しすることで、適用するCSSを切り替え、処理を軽くすることをお勧めします。
今回作成したサイトのアニメーションもスクロール以外は殆どCSSで実装しています。
◾無理に最初からメソッド（関数）にしない
メソッド…使いこなせたらかっこいいですよね…自分もそう思って無理にメソッド化してたら結局いらなかったり、変数のスコープの問題で使いまわすのが難しかったりと色々ありました…。
初心者の方は、先ずは泥臭く動くコードを書いて、そこからどうやったら共通化できるのかを考えていく方がいいと思いました。
本当はクラス図を書いたりしながら最適な作りを模索すべきですが、初心者は先ずは完成を目指しましょう！
ファビコンを追加しよう
ファビコン (favicon)とは、Webサイトのシンボルイメージのことです。
タブやブックマークに表示され、複数のサイトの中から目当てのサイトを見つける手助けをします。
設定方法は簡単で、htmlに少しコードを追加するだけで表示させることができます。
ファビコンの画像サイズや詳しい設定方法については下記のサイトが参考になります。
▼ファビコン作成の参考サイト
SP版を作成しよう
PC版の作成が一通り完成したら、SP版の作成を開始します。
今回作成したサイトはレスポンシブなので、PC版のパーツを利用しつつ差分のある箇所を中心にCSSの変更、アイコンの追加などをしていきます。
レスポンシブサイトの画面切り替えは、CSSのメディアクエリを使って表示端末の画面サイズ（横幅）を判定して行います。
SPの画面では、マウスポインタではなく指でタップして操作するため、タップ領域が狭い箇所を中心にCSSで調整していきましょう。
▼レスポンシブサイト作成の参考サイト
画像を調整してサイトの動きを軽くしよう
掲載する画像の枚数が少ないうちは、作成した画像や撮影した写真をそのままサイトに貼り付けても問題ないかもしれません。
しかし、スマホや一眼などカメラで撮影した写真は、Web上にそのまま載せるにはかなりサイズが大きい状態になっています。
また、印刷を目的として作成された画像は、一般的にWeb上で使用される画像の解像度である72ppiに比べ、300~350ppi程度と非常に高い解像度で作成されます。
そのため、未調整の画像を貼り付けすぎると、ユーザーの使用する端末のスペックや通信状況によっては動きが鈍くなり、サイトのパフォーマンスを著しく低下させてしまいます。
上記の様な自体を避けるために、画像を調整して容量を軽くすることをおすすめします。
解像度？という方はこちらを御覧ください
▼解像度の解説サイト
https://blog.karasuneko.com/4232/
画像を軽量化するには以下の方法があります。
◾画像サイズ・解像度を調整する
PhotoshopやWebサービスを利用して、画像サイズや解像度を調整します。
推奨する画像サイズや解像度の調整方法など、参考になるサイトをご紹介します。
ちなみにですが、基本的にWebサイトで使用する画像の解像度は、前述した通り72ppiになるよう調整します。
▼推奨画像サイズの参考サイト
▼画像サイズを変更できるWebサービス
▼ツールを使った解像度の調整方法
◾画像を圧縮する
画像を圧縮すると荒れちゃって見た目がおかしくなってしまうのでは…。と思っている方もいるかも知れませんが、実際には目で見てもわからないレベルで画像容量を半分程度まで軽量化することができます。
画像はWebサービスを利用することで簡単に圧縮することができるので、まだ試したことがないよ！という方は是非試してみてください。
▼画像圧縮のサービスサイト
Githubでサイトを公開しよう
サイトの作成が完了したら、ユーザーがアクセスできるようにサイトをWeb上に公開しましょう。
サイトを公開するためには、有料でサーバーを契約する必要がありますが、Githubを使用すると無料で公開することができます。
但し、Githubでサイトを公開するとソースコードも公開されますのでご注意ください。
補足：
Githubは、Gitをオンライン上で管理できるサービスです。Gitはプログラムの変更履歴を管理できるバージョン管理システムのことです。詳しくは下記の解説サイトをご参照ください。
▼Githubを使ったサイトの公開方法
▼GitとGithubの解説サイト
転載用にOGP画像を設定しよう
OGP画像は、twitterやfacebookなどのSNSサイトにURLが共有されたときに表示される画像のことです。
twitterのタイムラインを眺めていると、リンクがURLのテキストリンクで表示せれている場合と、写真とタイトル付きのカード状で表示されている場合があります。
この様なカード状に表示されているリンクのサイトにはOGP画像が設定されています。
▼OGP画像の例（twitter）
OGP画像の表示形式はカード状以外にも様々なタイプがあり、特定のサイトでは、htmlに記述する内容によって表示設定を変更することができます。
OGP画像が共有された先のSNSサイトによってどのように表示されるのかを確認するには、OGP画像シミュレータを使うと便利です。
▼OGP画像の設定方法
▼OGP画像シミュレータ
OGP画像が設定されているとリンクが目立ったり、押されやすくなったりするので、ただのテキストリンクよりもSNSでの拡散効果が期待できます。
余力があれば是非設定することをおすすめします。
Lighthouseでサイトの評価を見てみよう
Lighthouseは、WebページのパフォーマンスやSEOの評価、サイトの改善点などを自動でチェックしてくれる便利ツールです。
SEO (Search Engine Optimization)とは、直訳すると「検索エンジン最適化」です。ざっくりいうとSEOの評価が高くなるとChromeやSafariなどのブラウザから検索したときに優先して表示されやすくなります。
SEO対策を行うことで、検索からの流入数を増やし、集客効果を高めることができます。
Lighthouseを使うと、サイトの構造がおかしい場所や不足している設定、視認性の低い色を使用している場所などをコードレベルで判定・評価して教えてくれるのでサイトの改善に役立ちます。
また、処理速度が遅い場所や原因も細かく指摘してくれるので、なんかサイトの動きがもっさりしている…。といった場合にも有効です。
▼Lighthouseの使用方法
Google Analyticsでサイトの利用状況を確認しよう
Google Analyticsは、Googleが提供するアクセス解析ツールです。
サイトを訪れたユーザーの数や各ページの閲覧数、アクセスした端末の内訳など様々なことがわかります。
ユーザーの行動がわかると、構造改善や施策の効果確認など、サイトの運用に役立てることができます。
無料で使える高機能ツールなので、様々な企業で利用されています。
みなさんも是非導入してサイトの客観的な使われ方を分析してみましょう。
▼Google Analyticsの設定方法
UTMパラメータを設定してユーザーの流入元がわかるようにしよう
UTMパラメータは、URLの掲載元からの流入効果を計測するために設定するパラメータのことです。
設定することで、各サイトや広告からどれだけの数のユーザーがアクセスしてくれたかがわかります。
URLの末尾にパラメータを付与することで利用できるようになります。
UTMパラメータの例（?utm~以降）：
https://harahiro.github.io/portfolio/html/?utm_source=twitter&utm_medium=social&utm_campaign=twitter_profile
実際の数値は前章で解説したGoogle Analyticsで確認することができます。
作成したサイトのリンクを掲載する場合は、各掲載サイトごとにUTMパラメータを発行して使い分けてみましょう。
▼UTMパラメータの生成方法
▼UTMパラメータ生成ツール
最後に
ざっくりですが、自分がサイトを作成したときにしたこと、考えたことを一通りまとめてみました。
自分のまとめのために作ったというのもありますが、サイトを探しても意外と制作全体の各フェーズで参考になりそうなことやリンク集を一つの記事にまとめているものが見当たらなかったので、もしかして少しは需要あるかもと思ったのも作成に至った大きな要因でした。
サイトの作り方に悩んでいる人、勉強したい人に自分の制作過程が少しでも参考になれば幸いです。
※少し間違ってても笑って許してもらえるとありがたいです笑
最後までお読みいただいた皆様！ありがとうございました！
デザインや普段気になったことについてつぶやいていますので、よろしければご覧ください！
最後までお読みいただきありがとうございます！ もし気に入っていただけましたら、スキやSNSでのシェアもよろしくお願いします！