ãƒ‰ç´ äººãŒUdemyで10日間Webデザインを学んでサイト模写をやってみた

Webデザイン勉強中のジャムです。

前回に引き続き、オンライン動画学習サービスUdemyの「未経験からプロのWebデザイナーになる！400レッスン以上の完全マスターコース」を受講して学んだことを書いていきたいと思います。

 

今回の学習内容「実践Webデザイン」

前回はPhotoshopの基本操作などについて学びましたが、今回は「実践Webデザイン」というテーマで、ワイヤーフレーム制作に関してや、より実践的なPhotoshopでのデザイン練習などを学習しました。

今回の「実践Webデザイン」の章は約10日間で終了しました。

 

レッスン内容や進め方

今回ははじめにワイヤーフレーム作成に関する講義があり、その後Photoshopを用いてのWebデザインの実践練習といった内容でした。

ワイヤーフレーム作成に関しては、実習ではなく講義形式だったため、私の場合はノートにポイントをまとめながら動画を視聴していきました。

それ以外の部分は前回同様、動画を見ながら実際に手元でPhotoshopの操作を行なっていきました。

今回の実習は、パンくずリストやボタンの作成、様々なサイトの模写など、よりWebサイト作成に即した内容になっています。

 

ワイヤーフレーム作成についての学び

ワイヤーフレームとは
家の間取り図のようなもの＝サイトの骨組み・土台

ワイヤーフレーム作成で大事なこと

1. 操作性を重視する
2. 派手な演出はNG
3. 目的を明確にする

＜ポイント＞

・クライアントの目的を達成するための手段を考える

・最短で目標を達成できる導線を考える

Webサイトはあくまで目的を達成する手段だということを忘れずに！

 

ワイヤーフレーム作成手順

1. 依頼内容のヒアリング
   　「聞く」だけでなく「引き出す」
2. 同ジャンルのWebサイトの調査
   　他のデザイナーさんの知恵を借りる。20サイト以上探して調査！
3. 手書きでアイディアを書き出す
   　大まかで良いのでどんどん書く
4. PC上で清書する
   　文章・サイズ等可能な限り本番に合わせて正確に作成

 

上手なヒアリングのコツ

クライアントからの要望・イメージ　⇄　デザイナーからの提案

・具体的なサイトを見せるなど、明確なイメージを作りやすい工夫をする

・クライアントの隠れた要望を引き出す

 

ワイヤーフレーム作成における注意点

以下の3つを意識して作成する

1. ユーザーが迷子にならないサイトレイアウト
   • レイアウトパターンは最大2種類
   • ヘッダー・ナビゲーション・フッターの位置は固定
2. ファーストビュー＝サイトを開いた瞬間に見える画面
   • 重要な内容・見てほしいコンテンツを配置
   • 閲覧してほしいページへのリンクを見せる
3. 視線の動き
   • F型の視線の動きを意識する（起点は左上）
   • 視線の集まる場所に重要な要素を配置

 

サイトデザイン模写実習

今回、Webデザインの勉強法として繰り返し言われていたのが、とにかく良いデザインのサイトを真似るということでした。

この「実践Webデザイン」の章での実習がとても有り難かったのは、その「サイト模写」をどのように行っていくのか、という部分を実際に細かく教えてもらいながら練習することができたこと。
ここまでにPhotoshopの基本的な技術なども学習し、ある程度の使い方もわかってきたものの、実際にサイトページをまるっと真似してみろ、と言われると、意外とどこから手をつけて良いのかわからなかったりします。

この講座ではそこを丸投げするのではなく、上級者になると忘れてしまうような初心者がつまずきやすいポイントや、基本の基本であろう部分まで細かく段階を踏みながら解説を入れてくれているため、一人でできるまで投げ出さずにステップアップしていくことができました。

 

サイト模写のポイント

サイト模写で大事なポイントは「1pxのずれもないように細かく再現すること」。

サイズに位置、フォントや効果など、とにかく細部までしっかりと観察し、できる限りそっくりそのまま再現するよう努力します。

そうすることで、Photoshopなどツールのテクニックの習熟度があがっていくのはもちろん、デザインに関しての気付きや理解も深まっていくということでした。

ただ真似るのではなく、どうしてこれはこのサイズでこの位置にあるのか、この効果は何を狙ってかけられているのか、といったことを考えながら真似していきます。

実際に模写して作成したサイト画像

 

【自主課題】自分だけで1からサイト模写をしてみる

「実践Webデザイン」の章で学習し、上記のようにいくつかよくありそうな構成の架空サイトの模写も体験したのですが、動画解説がとても詳細にサポートしてくれていたため、どうも自分だけでできるのかという不安が拭えません。

というわけで、今後のレベルアップにも必須な「サイト模写」をサイト探しから全てひとりで行ってみることにしました。

 

模写するサイトの選択

模写するサイトは「良いデザイン」のサイトである必要があります。

そこで、玄人の方々が「良いデザイン」のサイトを集めてくれているギャラリーサイトを利用して探していきます。

ちなみに講座内で名前があがっていたのは I/O 3000 と ikesai.com の2つでした。

今回はその中からなんとなく I/O 3000 をチョイス。

見ていくと、様々なタイプのサイトが混在しています。

デザイナーさんのポートフォリオサイトなどはさすがのハイセンスでめちゃくちゃカッコイイのですが、動きが多くて模写し辛そうだったり、ハイセンス故のシンプルさやイレギュラーっぽい配置が初心者の練習向きではなさそうだったので、今回は敢えてそういったサイトはスルーしました。

コーポレートサイトなど、割とよく見る基本形の構成でありながら、かつ、少し作るべき要素が多そうなページを探します。

というわけで、今回は、熊本大学さんの「ましきラボ」というページを模写してみることにしました。

cwmd.kumamoto-u.ac.jp

ファーストビューの範囲はシンプルでありながら、トップページ下部には複数のコンテンツが配置され、その中にもリストがあったりボックスがあったり、と講座内に登場したテクニックも色々と試せそうなサイトです。

 

見本画像を作成する

講座内では見本画像や素材データなど全てがあらかじめ用意されていましたが、今回はそこから自分でやる必要があります。

初心者は意外とこういうところで引っかかりがちなんだよな、と個人的には思っていますが、この講座ではちゃんとそういった場合のツールなども紹介されていたので、本当に痒いところに手が届く、よく考えられた講座だと思います。

今回はchromeの拡張機能を利用して、サイト全体のスクリーンショットを取得し、それを見本画像としました。

ちなみに拡張機能は Chrome ウェブストア から入手可能です。利用したのはこちら。

chrome.google.com

 

作成にとりかかる

スクリーンショットがとれたら、それを見本に早速作成にとりかかります。

まずはPhotoshop上で見本画像を開き、全体のサイズを計って新規のキャンバスを用意。

見本にガイドを引いてサイズを計ったり、色をスポイトしたりしつつ、まっさらのキャンバスに（できる限り）同じものを作成していきます。

手順としてはだいたい下記の感じで進めました。

1. 見本にガイドを引きサイズ測定
2. 模写キャンバスに同様のガイドを作成
3. 背景やボックス等を作成
4. 文字を入れて調整
5. これをコンテンツごとに繰り返す
   （今回はトップ、アバウト、プロジェクト、お知らせ、メンバー＋アクセス・お問い合わせ、フッターの6つにわかれていました。）

いくつか苦労した点などを具体的に書いておきます。

 

素材の入手

まず、最初にどうしようと思ったのが素材の入手です。

サイト上で右クリックからダウンロードできるものももちろんあったのですが、そういった仕様になっていないものもありました。

そういったものはソースコードから探し出してダウンロードしました。

 

素材の加工

素材も集まったし！と思って意気揚々と作成を始めた私でしたが、いざ配置してみて、大きな違いに気がつきました。

色が違う。そして、木とか電線とかなくなってる。

トップページのメイン画像が綺麗に加工されていました。

<左>元画像　<右>サイトトップ画像

色の違いにはわりとすぐに気がついたのですが、木や電線が消されていることには、真ん中の文字を入れる段階まで全く気付いていませんでした。

今までサイトのデザインや画像などを意識して見ることがなかったので、ここまで当たり前に、自然に、画像加工が利用されているという発想が全くありませんでした。

この講座でも画像加工のレッスンは一応あったのですが、そこまで重点がおかれていなかったことと、受講して少し時間が経っていたため、再度自分で調べつつ加工作業をしました。

<上>元画像　<下>修正後

今回は、Photoshopが自動的に周囲の画像を解析して馴染ませてくれる「スポット修復ブラシツール」と、指定した位置の画像で塗りつぶしてくれる「コピースタンプツール」を駆使しました。

自動で馴染ませてくれるとかPhotoshopすごいですよね。

 

文字に関する設定

そして今回かなり悩まされたのが文字に関する色々。

正直、画像やシェイプなどはサイズや色を計ればそこまで苦労せずに同じようなものを作ることができるのですが、フォントに関しては可能性が無限すぎてすごく大変でした。

• 使用されているフォントはなにか
• フォントサイズはなにか
• ウェイトはどれか
• 字間や行間はどうなっているか
• 文字自体の幅や高さは変更されていないか

普通にフォントとフォントサイズだけでも大変なのですが、字間や行間、文字自体の幅や高さも可変となると、これを真似しようとするのは苦難の道のりです。

また、このフォントだろうというものに出会っても、数字部分だけ違うフォントを使ってそうだ、みたいな発見があったりして、なかなか厳しかったです。

この部分はCSS内のフォント設定をチラ見したり、フリーフォントサイトとにらめっこしたり、いろんなところのサイズをはかったりして乗り切りました。

今回は他の人の作ったものを真似するという課題のため、「正解を見つける」といういような感覚になってしまっていましたが、実際自分がデザインする側になる場合を考えると、フォントの持つ自由度の高さは大きな武器だろうと感じました。

ただ、自由度の高さ故に悩む度合いも高くなると思うので、ある程度のセオリーやテクニックを学んでいければと感じています。

 

初めて出会うシェイプ等の作成

今回もうひとつ大変だったのが、初めて出会ったシェイプ等の作成です。

解説動画もなく、また見本に関してもPhotoshopデータがあるわけではないので、カンニングもできません。

実際のサイト画像を見ながら、どういうふうに出来るかを想像していくところからはじまります。

今回、左端のバッジに関しては「多角形ツール」というもの使ってわりとすぐに再現することができました。

また、吹き出しに関しては、全く同じというわけにはいきませんでしたが、既存の吹き出しシェイプを用いて、近いところまでもっていくことができました。

外側の点線の設定など細かい部分で少し手間取りました。

最後、右端の画像は、コンテンツ同士を区切る境界線なのですが、実はこれが波線になっていました。

こちらは、上の画像のように、別に波線を作成して合わせることで、境界線自体が波線であるように見せる手法をとりました。

それぞれ、自分なりに模索しながら近い形まで辿りつくことができ、勉強になりました。

それぞれのシェイプの作成方法を考え、自分で作っていくというテクニック部分もそうですが、特に波線の部分などは実際に作成する段階でやっと気付いたくらいなので、デザインの細かい部分を見る、という意味でもとても勉強になったと思います。

 

完成したもの

サイト模写完成版の画像を貼っておきます。

全体像だと画像小さいですがこんな感じです。

初めての試みでちゃんと出来るか不安だったのですが、意外と形になりました。

ちなみに今回のサイト模写は3日間ほどかかっています。

 

学習とサイト模写の感想

今回は「実践Webデザイン」というテーマで、ワイヤーフレームの作成に関する学習から始まり、実際にWebデザインで用いるであろうPhotoshopテクニック、そしてサイト模写まで幅広く学ぶことができました。

ワイヤーフレームに関しては、作成に関するポイントや注意点等の知見を得ることが出来ましたが、実際に作成は行っていないので、そこはこれからまた自習と実践が必要だと感じています。

サイト模写に関しては、動画での課題をこなし、また、自力で1からやってみて、「こういう風にやるのだ」という部分はだいぶ身についたように思います。

「1ピクセルもずらさず、できる限り同じように再現する」というのは、思った以上に大変で、後半では段々と、誰に見せるわけでもないし、もうこのくらいでいいんじゃないかと感じてしまうこともありましたが、自分の手でひとつのものが出来上がっていく満足感もとても大きかったです。（模写ですが）

今回の講座内容はこの講座を終えても続けてデザインを学んでいくために必要なことを、細かい部分まで丁寧に教えてくださっていたのがとても有り難かったです。

サイト模写はあくまで練習・訓練であり、その本質はテクニックの習得やデザインを身を以て覚えていくことにあるので、これから自分でデザインを行っていくために、これからはもっとデザイン部分の意図などにも気を配りつつ、練習を重ねていきます。

 

長くなってしまいましたが今回はここまで。

現在は引き続きUdemyにてHTMLとCSSの章を学習中です。

次回はまたこれらを終了してからなにかしらアウトプットの予定です。

お付き合い頂きありがとうございました！

良ければ次回以降もよろしくお願いします！