こんにちは！新人森田です。
入社してからあっという間に３ヶ月が経ちました。
まだまだ知ることが山積みすぎますが、ここからは更に気合い入れていきます！
そして久しぶりのブログ更新ですすみません。
ネタ探しに行き詰まって違うことしてました。
何をしていたかというと、サイトコピー的なことです。
サイト模写はデザインのスクリーンショットを撮ってPhotoshopでトレースし、間の使い方だったり平面的な勉強が出来ます。
サイトコピーはコーディングで同じようなサイトを作るので、模写の効果＋コーディングの腕も上がるんじゃないかという目論見です。
仕事で少しずつコードを触るようになりちょっとしたアイコンなどを画像として切り出して処理していたら、師匠から画像を使わないやり方を教わって目からウロコだったり。
ギャラリーサイトでかっこいいなーと思ったサイトをレスポンシブにしたくなったり。
そんな経緯があって始めてみました。
参考元の作り方を批判したいわけじゃなく、どうやったらより良く作れるかの練習です。
作業する上でのルールもなんとなく決めてみました。
サイトコピーのマイルール
（コード読み解くのめんどくさいから）出来るだけ元のコードは見ない
色とかフォント情報などは参考にしますが、自分でやり方を模索するためです。
（Photoshop立ち上げるのめんどくさいから）出来るだけ画像を使わない
画像を使わないほうが軽いし、修正も楽かもしれない。という言い訳です。使うときは使います。
こんな感じで、ここからはどんな感じで進めたのかをご紹介。
制作準備
制作環境を整える
Bootstrapの回と同様、やっぱり最初は制作環境です。
自分でフォルダ作ってローカルで確認しつつっていう感じでも出来ますが、Compassなどの導入・scss使うにはscout起動必須、などなど結構手間だったりします。というか最初はそうやってました。
が、そんなやり方をしなくてもあるんです。便利ツール。
どん！師匠に教えていただいたMiddlemanという静的サイトジェネレータです。
これはRubyをベースに作られているため、まずRuby環境を整える必要があります。
やり方はRubyを始めようで詳しく紹介しています。
最初が少しむずかしくても、Middlemanを導入すればちょっとコマンドを書くだけで至れり尽くせりな環境を作ってくれます。
サーバーも立ち上がるみたいだし、練習するにはこの上ありません。
コピーしたいサイトを探す
ギャラリーサイトにも色々あるし、それをまとめたものもググればすぐ出てくるんですが。
あえて挙げるとしたら、このへんがいいかもです。
io3000
どこのまとめサイトでもオススメされてる使い勝手の良いサイトです
muuuuu.org
最近はやりの１ページ完結型の縦長サイトがたくさんあります
これらは国産サイトのギャラリーですが、そのうち海外のデザインも参考にする予定。
おそらく１つはコピーしたいものが見つかったと思うので、早速作業にうつりましょう。
私の作ったものを例に挙げながら作業の様子をお伝えしていきます。
Chowder’sのコンテンツをコピーする
まず１つめに選んだのは、Chowder’sというスープ屋さんのサイトの一部です。
メニューラインナップの下に、本日の名言とおすすめメニューの紹介があります。
このデザインがシンプルなのに可愛くて、すごく気に入ってしまいました。
構成を考える
まずどんな構造かを調べてみます。
コンソールで背景画像を消してみると、要素のひとつひとつがよく見えます。
見てみると、見出しがそれぞれ画像だったので、cssだけで作ってみようと思います。
まずはこんな風にボックス要素の構成を決めます。
コーディングする
画像の代わりにcssのborderを使うことで周囲の線を処理。
ポストイットに見せかけた黄色いボックスも頑張ればいけそうですが、さすがにそこまでやるとコードがごちゃごちゃしそうなので画像を使います。
Google Fontsを使って見出しのフォントを似せれば完成です。
↑スクロール出来ます
日替わりコンテンツのため、引用したスクリーンショットと内容は違ってます。
スープの画像のところは角丸にしたdivにbox-shadowを使ってそれっぽく。
完全再現とまではいきませんがだいぶ近いはず。
まとめ
今回の例はコンテンツの１部なのであまり複雑なことはしていません。
でもcssだけでもフラットなデザインなら画像なしで結構いけちゃうことが分かりました。
英字ならGoogleFontsで表現の幅もぐっ広がりますね。
というわけでウォーミングアップ編は終了です。
ここから徐々にコピーする範囲をサイト全体に広げていきたいと思います。
次回もお楽しみにー！