デザイン

【WEBデザイナー】未経験の私がWEBデザイナーになる為にやった超具体的勉強方法。

こんにちは!SHIMO(@shiiimosです!
WEBデザインの勉強中って、この勉強方法でいいのかな?とか迷いや焦りを感じることってありますよね。

今回は私の実体験をもとにWEBデザイナーになるための具体的な勉強方法を紹介していきたいと思います!少しでも参考になれば嬉しいです。

未経験でもウェブデザイナーになれるのでぜひ実践して見てください!

この記事はこんな方へおすすめ!

  • WEBデザインを勉強している・興味がある人
  • 勉強しているけど行き詰まってる人
  • 何から勉強して良いのかわからない人

ウェブサイトを作ってポートフォリオに載せよう!

制作会社やデザイン事務所に入るには「私は未経験だけどこんなことできます」「これだけスキルがあります」とゆうことをわかってもらうためにポートフォリオを見せる必要がありますよね。この善し悪しで転職できるかどうか決まるといってもいいと思います。

そのためにポートフォリオに載せられるサイトを実際に作成していきます。

私の場合、丸々3サイト作成するのは正直大変だったので、ジャンルの違うサイトのトップページのみを作成しました。

すでにいきたい会社が決まって入ればその会社でよく扱っている業界のサイトを作ると好印象です!例:企業向けサイトが多ければ企業サイト

サイト完成までの流れ

いきなりサイトをデザインしよう!としても難しいと思います。実際のサイト制作の流れはこんな感じですすめていきます。

  1. サイトの設定+仕様の決定
  2. ワイヤーフレーム作成
  3. デザイン作成(Photoshop)
  4. コーディング
  5. WEB上に公開

ワイヤーフレームはコンテンツの骨組み、デザインはコンテンツを効果的にPRする役割。コーディングは見る人にストレスないようにデザインを表現する役割。

どの部分も大切です。コンテンツが悪ければターゲットに見てもらえないし、デザインが悪ければ伝えたい意図がうまく効果的に伝わらない。コーディングやプログラムが動かなかったり表示が遅ければユーザーはページを離れます。

ただカッコイイデザインを作るのでなく、サイトの役割を考えていくといいデザインができると思います。

1:デザイン・コーディングの基礎

手を動かす前に、デザイン・コーディングの知識を頭に入れておきましょう。コーディングだったらタグの役割。例:見出しの役割のh1』

デザインなら反復や整列。完璧でなくて良いので「ああ、、そういえばあの時そんな事言ってたな」みたいな感じでOKだと思います。

もし職業訓練校やスクールに行っているのであればこのへんは最初に教えてもらえると思います!※私はスクールでタグの役割とか教えてもらいました。

独学でも良い書籍があるので問題なかったです。参考に勉強に役立つ本を紹介します。あとは既存サイトをとにかく見て、デザインの引き出しを広げましょう。

デザイン参考本

▼レイアウト・デザインの教科書 [ 米倉明男 ]

▼なるほどデザイン 目で見て楽しむデザインの本。 [ 筒井美希 ]

レイアウトの本で基礎を学んで、なるほどデザインでは基礎の使い方の応用をしていくのにいいと思います。

コーディング参考サービス

コーディングは本の前にprogataやUdemy(有料)など動画や学習サービスで勉強することをお勧めします。動画や解説つきで基礎をやるには始めやすい印象です。

Progata
https://prog-8.com/

Udemy
https://bit.ly/2ZVTDSD

コーディング参考本


【新品】【本】HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 吉田真麻/著

2:サイトの設定を考えよう!

サイト設定

いよいよサイト制作に入ります。さあデザインするぞ!、、その前に!
どんなサイトを作るか設定を考えましょう。誰に向けてどんなサービスを広めていきたいのかでデザインのテイストや入れるコンテンツも大きく変わってきます!

例えばウエディングプランナーさんのWEBサイト設定なら・・・

  • 誰に向けて→20代〜30代のカップル
  • どんなサービスを→ウェディングプランのプロデュース
  • どんな目的で→サービスの認知と問い合わせを増やしたい

サイトテーマ設定をしっかりしておくと、ターゲットに刺さる説得力のあるデザインに近づけると思います。いつもデザインの途中でサイトテーマからブレないように意識するのが大切!!

サイトの目的に合わせたデザインは、さっきも紹介したこの本が優れてます。

なるほどデザイン 目で見て楽しむデザインの本。 [ 筒井美希 ]

サイトのコンテンツを考える

先ほど決めたサイト設定を参考に、サイトコンテンツを考えていきます。入れていく内容はヘッダー・メインビジュアル・サービスのコンテンツ・お問い合わせ・フッターなど・・・

サイトのメインになるサービスのコンテンツはさっき決めたサイト設定から考えられます。

  1. どんなサービスを:ウェディングプランプロデュース→「どんなプランが選べるか実際のプラン例を載せる」
  2. どんな目的で:サービスの認知と問い合わせを増やしたい→「サービス内容がわかりやすようにコンテンツを配置する」「問い合わせフォームをトップに載せる」

コンテンツを決めたら構成案を形にします。ソフトを使ってもいいですが紙に簡単に書いてもOKです。今回こんな感じで紙に起こしました。

この構成案を起こしたものを「ワイヤーフレーム」と言います。

デザインテイストを決める

先ほど決めたサイト設定から、デザインテイストを考えていきます。今回の例で考えると、

  • 20代〜30代のカップル→若者を意識して
  • フリーのウェディングプランプロデュース→直感的にどんな式ができるのか、幸せな時間が過ごせそうか雰囲気やイメージを写真で伝える

この2点から

しも
しも
若者を意識したおしゃれなモチーフやフォントでアクセントを入れつつ写真で見せていこう!

といったように、サイトの設定からデザインの方向性を決めることができます。それにプラスしてデザインテイストに似たようなサイトを見つけて参考にしていくのがおすすめです!

私の場合、参考サイトはこちらで探しています。

https://muuuuu.org/

3:サイトデザインを作ろう

先ほど作ったワイヤーフレームを参考にデザインを作っていきます。実際にそのサイトのオーナーになったつもりで作るといいと思います!

レイアウト、余白とり、写真選びなど実際に手を動かして作っていきます。メインビジュアルでは何をPRしたいのか、このコンテンツでは何を伝えるのか。なぜそのデザインにしたのか説明できるといいですね!

ダミーテキストは入れずにサイト内に入れるキャッチや文章は考えましょう。そうすることでリアリティが増します。

デザインをもっと良くしたいなら

自分一人でデザインしていると、考えすぎて、良いのか悪いのかよくわからなくなってきた!!とゆうことありませんか?

そんな時は「第3者デザインチェック」これをおすすめします!!できたデザインを第3者にチェックしてもらってください。スクールの先生や先輩ウェブデザイナー。身近にいなければオンライン上でデザインを見てもらえるコミュニティーなんかもあります。

2回、3回と修正していくうちにどんどんいいデザインになるし、どこが悪かったのかがわかってきます。最初は60%くらいで作りデザインチェックしてもらうことを強くお勧めします!

4:HTML・CSSコーディング

デザインができたらコーディングです。できればレスポンシブスマホ対応までやっていきましょう。HTMLは家で例えると柱などの基礎部分。CSSは部屋のカーテンや窓の大きさなどインテリア部分です。

HTML(家の基礎)を組んでからCSS(インテリア)部分の装飾を行っていきます。コーディングするときに使うのがテキストエディター(ソフト)です。私はSublime Textを使っています!

理由は二つ

  • 軽いから
  • プラグインで作業効率が上がるから

Sublime Text3ダウンロード
http://www.sublimetext.com/3

そのほかにもいろんなエディタがあると思うので自分にあったものを探して見てください。

6:サイトに動きをつける

余裕があればjQueryなどでサイトに動きをつけてみましょう。写真をスライドさせたり、戻るボタンページ内リンクあたりの実装がおすすめです!

私の場合、写真のスライドは実際の仕事でも高頻度で使用しますよ!

※やり方などまた別記事でまとめてみます。

7:実際に公開してみよう!

コーディングまで完了したら、FTPソフトを使ってサーバーに公開して見ましょう!さらにアップしたサイトをポートフォリのにも載せましょう。

※サーバーアップ方法もまた別記事でまとめてみます。

最後に

私がおすすめする勉強方法は、とにかくサイトを作ってフィードバックをもらう事です。

これにはちゃんと理由があって、練習用みたいな感じで決められたものを作るよりも自分でテーマを考えて作る方が楽しいです!

楽しい=続けられる=モチベーションアップ!に繋がります。

架空サイトでも実際のサイトでも良いんですが、テーマを自分で決めてターゲットに伝わるコンテンツを考える。これを意識できるデザイナーさんはクライアントの意向が汲み取れる良いデザインが出来るようになるのかなと思います!

サイトデザイン→デザインフィードバック→コーディング→つまづく→調べる ※これの繰り返し

最初はつまづく箇所も多いと思いますが、勉強を継続させれば、未経験でもウェブデザイナーになれます!この勉強方がウェブデザイナーの第一歩になれば嬉しいです!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です