3つ目の模写サイトができました！

どうも、すなです。

前回に引き続き、また新しい模写のポートフォリオができました。

今回も制作するに当たってのポイントを話したいと思います。

架空の病院のサイト

今回もシリーズ「大学卒業までに20万/月を稼ぐ人の話」になります。

まだ見ていない方は、前回の記事はこちらになります。

完成した模写サイト

3つ目に制作した模写サイトは架空の町の医院のサイトになります。

早速ですが、完成品がこちらになります。

はにわまんさんの元サイト

今回、僕ははにわまんさんのこちらのサンプルサイトを参考にしました。

技術的にはそこまで高くない

今回の模写で用いたスキルや詰まったポイントなどを話したいと思います。

HTML&CSSのみ

3回目の模写で使ったスキルは以下になります。

• HTML
• CSS

これだけでした。

JavaScriptやPHPなどの動作確認をしなくてよいので、元のサイトをひたすらに書き書きする作業がメインでした。

全ページは5枚

ページ数は5枚と今回は多めになりました。

ページ間の構造は以下になります。

• トップ
  • 病院の紹介
  • 施術の案内
  • スタッフの紹介
  • アクセス

作業時間は12時間

今回は枚数自体が多かったので、単純計算その枚数分作業時間が増えてしまいました。

しかし作業自体はあまり難航することなく、今回はスラスラと書くことができました。

昔の感覚がだいぶ戻ってきています。

作業量を減らすためにした工夫

今回は5枚分ページを書いたのですが、真っ当に全部書いているともっと時間がかかると思ったので、今回は書くのに少し工夫をしました。

サイトを見ていただいた方は分かると思うのですが、5枚それぞれのページでは共通している箇所(ヘッダーやフッター、メニューなど)があります。

それを今回は逆手(?)に取り、1箇所で作って他の箇所にも転用することで時間と作業量を削減しました。

cssファイルを2つ読み込む

基本的に1つのHTMLファイルに対しては1つのcssファイルを読み込むのが普通なのですが、今回は

• 共通用のcssファイル
• 個別用のcssファイル

を用意して、先に「共通用のcssファイル」を読み込んで、後から「個別用のcssファイル」を読み込むことにしました。

今回のサイト模写ではこれが特に有効で、共通用cssファイルを用意したことで個別用ファイルの分量をかなり少なくできました。

レスポンシブにも対応

今回も同様に、全てのページでレスポンシブ対応をさせました。

Font Awesomeとパンくずリスト

今回のサイトでは今までで目立って扱ってこなかったこれら2つの要素を扱いました。

模写についての記事なので、触りだけ紹介します。

Font Awesome

Font AwesomeはWebでできる、大量のアイコンを扱っているサイトです。

文字や記号などのアイコンはもちろん、ツイッターやフェイスブックなどのロゴも扱っています。

linkタグにFont Awesomeへのリンクを貼り、iタグとしてアイコンを簡単に導入できるので非常に使いやすく、オススメです。

今回はヘッダーロゴの病院のアイコンと、同じくヘッダーにある電話マークのアイコンにこのFont Awesomeのアイコンを使用しました。

パンくずリスト

パンくずリストとは、Webサイトに訪れたユーザーが今どこにいるのかを表したナビゲーションの一種です。

『ホーム>通販>事務用品>ハサミ』の様に階層的に現在地を案内します。

今回はページ数が多くなかったので、トップ以外のページで手作業でパンくずリストを作成しました。

7,8万が妥当(?)

ページ数こそ多いものの、今回の模写サイトはHTML&CSSのみの作業だけのサイトなので、案件を受注するとしてもそこまで単価は上げられないかなと思いました。

作業時間の割りには安いかもですが、でもそこら辺の普通のアルバイトと比較したら断然マシなので、めげずにWebサイト制作を頑張りたいと思います！