シンプルライフかわうそ.29

かわうそ顔の男が運営してます。シンプルライフを目指します

【初心者向け】WEBサイトトレースをしてラフを作ってみた

こんにちは管理人のかわうそです
 

この記事の対象者

WEBデザイン勉強のため、WEBサイトトレースしてます。(2サイト目)
僕自身、初心者のウェブデザイナーというかウェブのコーダーです。仕事もまたデザインよりはコーディングばかりです。レベルはほんとに最底辺のウェブのデザイナーなんですけれども、それでも完全な初心者の方、1からHTMLを勉強するぞって方には難しい内容になると思います。HTMLとCSSを一通り勉強して次何したらいいかわからない、そんな方に一番役立つ内容かもしれません。一緒に成長して行けたらいいなー!ってことを事前に説明しておきます。
 
今回はラフ作成までを書いていきます。明日にはデザイン~コーディングまでを記事にできたらと思います。
 

やりたいこと増→時短しなきゃ→髪セット中に声入力中

最近は全然WEBデザインの勉強ができてないなぁと思っています。心理学の勉強もしたいし、WEBの勉強もしないといけないなぁと思ってるんですけれども、今何が1番やりたいかって考えたときにやっぱりブログを書きたいとこの瞬間思っているので、今こうしてブログを書いています。しかも時間も限られているので、今髪のセッティングをしながらEvernoteでボイステキスト入力にてこの記事を書いています。時間がないということは生産性が低いことです。できる限り密度濃く生きていきたいものですね。
 

WEBサイトをトレースする理由※雑

それでなんで既存のWEBサイトのトレースをしようと思ってるかとなんですけれども、結局のところ何をするにもやっぱり真似をするのが1番学習効率がいいと思うからです。僕自身、インプットや引き出しがそもそもないのに、いいアウトプットができるほど器用ではありません。日本語にしても親が話してる言葉をマネところから始めたと思います。勉強するにしても、いきなり応用なんてなく、まずは教科書で先人の知恵を学んだと思います。先人が残してくれた知恵って言うのをそのまま無視して、車輪の大発明のようなやり方っていうのはちょっともうもったいないかなって言うのもありますし、どういったものが優れているのか、どういったものが良いデザインなのか、どういったものが良いコーディングなのかを、実際にプロが設計して組み立てられて、数十万のお金を払って購入して、実社会で運用されているものをマネしてみることが上達する近道なんじゃないかなと思っています。さらに言うと実務面でも対応できるように勉強できるのがWEBサイトトレースだと考えています。仕事として実務ができるかどうかって言うところは、頭が良いとか、頭の回転が速いとか、コミュニーケーション力があること以前に重要だと思っています。前の仕事は接客業だったんですけども、管理や資料作成などは得意だったんですけど、実務的なところに関しては、歴の長いアルバイトさんの方が詳しかったりしたんですね。必ずしも学ぶ必要はないのかもしれませんが、その道のプロとして成長していく中で、いざとなったときに頭でっかちになってしまいたくはないです。前職の反省もあり、今できる限り自分自身の手でウェブサイトのトレースができるように頑張っています。実務面ではコーディングのお勉強ですね!あとは、まぁ、なんかこう、本見ながらコーディングするのもしんどいし、良い教材も見つからないし、それなら本物で学びながら、実務に繋げつつ、デザインの引き出しも増やしていきましょうって感じです。
 

トレースの流れ

ざっくりです。

  1. トレースするウェブサイトを決める
  2. ウェブサイト全体を画像にする(キャプチャーする)
  3. ウェブサイトで使用されている画像素材を一括でダウンロードする
  4. イラストレーターもしくはPhotoshopでラフを作っていく※具体的手順は後で簡単に説明します
  5. 実際に画像などを配置してデザインをしていく
  6. スライスしてコーディングのための素材準備をする
  7. 実際にコーディングをする
こんな感じですかね!とりあえず今日はラフを作るまでを、後日、デザイン~コーディングまでを、実際に僕がトレースをしたものを見せながら、見ていただきながら、めちゃくちゃへたくそなんですけれども、ご指摘いただきながら説明できたらなと思ってます。
 

トレースパート

①サイト決定
まずサイト選びです。正直、適当でいいと思います!!!
まぁちょっと真面目に言うと、目的に合わせて選べばいいかなと思います。例えば僕だと会社が40サイト以上のECサイトを運営しているので、出来る限りECサイトの中から選びます。ただどうしてもこのデザイン真似してみたいとか、この実装どうやってるんやろうとか気になるようであれば、ピンときたサイトを選べばいいと思います。悩む時間がもったいないです。絶対。明らかに次元の違うレベルでCGアニメーションとか使われてるサイトとかは選んだらだめですよ!算数と理学は違うからね。
 
一応リンク貼っときます。カッコいいデザインが多いサイトだと思ってよく使います。
 
②全画面キャプチャー
次はキャプチャーです。デジハリに通ってた頃の僕のように、ちまちまスクショを撮って、ペタペタ貼り合わせるのは絶対にやめましょう。時間の無駄です。僕がトレースにあたって、そして仕事中でも使っているGoogle Chromeのアプリケーションを紹介します。

chrome.google.com

シンプルで使いやすいです。

※絶対に読んでください※

キャプチャーで1番大事な事は必ず100%の等倍で画像を保存することです。もしここでブラウザを90%であったり110%の拡大縮小表示をしてしまっているとせっかくトレースしても全然違うサイズで設計している状態になります。プリウスを設計しているのに実際縮尺を間違えていてミニカーサイズで仕上がる設計になっていた!そういうことがこのタイミングで起こり得ます。例えば何が問題かと言うと、余白の取り方とか要素の大きさとかトレースすることでなんとなく実際に斉藤で使用されてるいいデザインの配置とかバランスが学べることがトレースの良いところだと思うんですけれども、縮尺を間違えるとそのトレースの良いところを完全に消してしまうってことです。無意味です。さらに言うとこの拡大縮小は結構便利なんですが、実際に仕事をしていても何かレイアウトが崩れていると思って修正したけど、実際のところは何も問題なくて、ただブラウザを110%の拡大表示してしまっていたからレイアウトが崩れてるように見えて、直す必要ないところを直すどころか崩してしまう!みたいな無駄の極みが起こります。普段からブラウザを拡大縮小する癖っていうのはなくしていきましょう。
話が逸れましたが大事です。
③画像一括保存
次は画像保存です。URLぶち込めばウェブサイト上の画像を一括で保存できます。紹介するのでちまちま保存するのはやめてください。

https://imagecyborg.com/

画像素材は使うか使わないかは個人の判断で行ってくださいね。例えば勉強のためにトレースをするんですけれども、コーポレートロゴであったり、複雑な画像を1から自分で用意してトレースするやり方を効率がいいと思うか、効率が悪いと思うか人それぞれだと思いますし、そこの基準で決めてしまっていいと思います。僕は実務上コーディングが多いのでコーディングを勉強したいと思いますので、あまりにも複雑で時間がかかりそうなイラストとか画像素材はもうそのまま使ってます。似たフリー素材を探すぐらいはあるんですけど、基本的にはそのまま使いますね。ここに関してはそれぞれの目的に合わせてその時々の目的に合わせて決めればいいと思います。
 ④ラフ
ワイヤフレームと言うかもしれませんね。画面キャプチャした画像を背景にして僕はイラストレーターで作っていきます。Photoshopで作る人も多いと思うんですけど業務上イラストレーターの方がよく使うのでイラストレーターを使います。ただどちらも基本的な部分は同じだと思うので問題ないと思います。
イラレを使う場合は、ピクセルビューをONにして下さい。そしてこの画面右上、赤の部分をクリックしてONにして下さい。これは配置する画像や作成するオブジェクトをピクセルグリッドに整合させてくれる優れものです。青部分はピクセルグリッドに整合ボタンです。整数でない座標を持つ要素を、近似の整数値にしてくれます。なぜこんなにもpx座標の整数値に拘るかは、また別記事にしたいと思いますが、スライスして書き出す際に、スライスサイズよりも1px大きく書き出されてしまう原因になるからです。1pxサイズがずれると、コーディング時に計算が狂いますし、等倍サイズで画像表示できないと、ぼやけてしまい、見栄えに影響します。
まぁこれは少し余談です。
f:id:may29kh:20181009230321p:plain
背景にキャプチャーした画像を置いて要素のサイズ、要素同士の余白を測りながらラフを作っていきます。この時に僕のこだわりがあります。それは要素の大きさや余白のサイズホントの大きさやカラーコードを全て文字として残すことです。これは効率化を図るためです。イラストレータPhotoshopで例えばレイヤーや階層が深くなったりグループ化が多いデザインだと、何回も何回もクリックをしないとその要素の情報を手に入れないことがあります。そもそも毎回イラストレーターを立ち上げて催そうをクリックして情報を吸い上げるそのことがかなり無駄だと思います。時間がかかる要因です。なので最初の段階で確定してる情報は文字としてレイヤーを分けて書いていきましょう。
 
以上が大まかな流れになります。最後に僕が実際にトレースした様子をさっと紹介します。

かわうそがトレースしてみたやつ

①トレースサイト コヒガシデザイン

コヒガシデザイン | 奈良・鳥取のデザイン制作

なんかシンプルでかっこいいなぁーって思ったからトレースすることを決めました。シンプル好き。

②キャプチャー

f:id:may29kh:20181009235725p:plain

コヒガシデザイン

 

こんな感じで、全画面キャプチャします。

③ラフ

f:id:may29kh:20181010000258p:plain

見ずらいですがこんな感じです。赤字は余白、青字はpx*pxやemetでfz14、colorを書いてます。アートボード外には、body全体のサイズ、articleのサイズ、wrapperのサイズもしっかりメモってます。ちなみにロゴ以外は自作です。

④デザイン

 

f:id:may29kh:20181010000305p:plain

ラフからデザインするとこんな感じになります。画像素材以外は自作ですし、画像素材でもWORKS部分は自作です。デザイン以降に関しては後日記事にします。

 

グダグダのラスト

いかがでしたか。次回はデザイン~コーディング編です!まだコーディングが終わってないので、いつになることやら!もっといいトレース方があったり、ツールがあったり、そもそもかわうそ何やってんの?レベルでお叱り頂ける方は、存分にご教授頂ければ幸いです。