フリーランスが会社員収入を継続して得られないパターン7つ

ウェブデザインの勉強を最短で行う方法【5分】

現在、WEB制作でWEBデザインとコーディングを行なっているフリーランスが、WEBデザインの勉強を最短で行う方法をまとめました。よくデザイン は「感性やセンス」と言われますが、それを身につけるのは難しく時間がかかります。最短で身につけるためには「論理的に」正解を導き出すこと大事です。今回は論理的なWEBデザインの勉強方法を知って最短で成果を出す方法を紹介します。

1.ウェブデザインの勉強を最短で行う方法

  1. 成功例を知る
  2. 失敗例を知る
  3. 実践する
  4. フィードバックをもらう

1.ウェブデザインの成功例を知る

まずは、ウェブデザインの成功例を知って、このチェックリストに当てはまるデザインを行いましょう。

ポイントは成功例を言語化して理解することです。ここが「センスや感性」とは違って「論理的に」デザインを行うことにつながります。

【5分】ウェブデザインの基本手順を初心者向けに解説

初心者のためにUXデザイン原則と手法を5分で解説する

ウェブデザイナー初心者向けの絶対知っておくべき基本5つ

CV(コンバージョン)率の高いLPデザインチェックリスト18

ヒューマンインターフェースガイドライン15の原則を5分で解説してみた

2.ウェブデザインの失敗例を知る


ここで、どのようなデザインが失敗と言われているのか知りましょう。この「失敗例」に当てはまらないデザインができれば、最低限のウェブデザインができているということになります。

ポイントは失敗例を言語化して理解することです。ここが「センスや感性」とは違って「論理的に」デザインを行うことにつながります。

ダサいデザインチェックリスト17を初心者向けに解説

ウェブデザイン初心者がやりがちな失敗11選

3.ウェブデザインの勉強を実践する

アドビXDやfigmaなど比較的動作が軽くて簡単なツールでデザインをしてみましょう。

わたしはよくfigmaを利用していますが、figmaは、無料でオンライン上で直感的にウェブデザインができるツールです。イメージはパワポ上でデザインを作成している感じです。オンラインツールなので複数人で一緒に同じアートボードを確認、デザインもできます。

以下に簡単にfigmaでデザインする方法を解説します。

簡潔に方法をまとめると以下3ステップです。

1.figmaのページで新規登録する

 

2. アートボードを作成し、長方形を配置→テキストや、中身を入れていく。

ほとんどパワポと同じ要領で行います。左上からテキストや図形などを選ぶことができます。

テキストの日本語フォントは以下4つのみを使うことができます。下2つは装飾フォントなので、基本的には上2つのみを使っています。英語フォントはGoogleフォントなら大体使えます。

– Noto Sans JP
– Noto Serif JP
– Nico moji
– Nikukyu

あと、テキストのフォントをfontawesomeに変えて、fontawesomeのCheet Seatからアイコンをコピペすればアイコンも使うことができます。

 

3.デザインを見てもらいたい人に共有する

右上の「Share」をクリックすると、リンク取得画面があらわれます。リンクをシェアしたい人に送りましょう。

 

 

4フィードバックをもらう


実際にデザインをしてみて、他の人に見せてみましょう。そこで何を思うかフィードバックを受けましょう。

ここでポイントとなるのは、ウェブデザインは手段にすぎず、目的は「CVを上げる」ことだということです。最も良いフィードバックをもらう方法は、ウェブサイトのターゲットに見てもらい、購入したくなるかフィードバックをもらうことです。ここで、ウェブサイトの内容ではなく、ウェブデザインが原因(例えば、サイトがごちゃごちゃしてるから見にくいなど)のことで購入をやめようと考えたと思われたなら、改善の余地があるということです。

フィードバックについては私が直接実案件に即した課題を出して添削を行なっているので、興味のある方はどうぞ

 

 

ウェブデザインを勉強するのに最も効率的な方法はスクールへ行くこと

質問し放題の環境で学べます。

私は本を10札以上読みつつ、photoshopやillustratorの使い方ググって手を動かして色々なウェブデザインを作ってきましたが、ウェブデザインの勉強を効率的に行うなら断然スクールです。以下の形態のスクールであれば、1か月間のみ集中的に質問し放題の環境で学ぶことができます。まずは1週間無料体験してみることもアリです。

 

テックアカデミー

ウェブデザインコース、コスパよく稼げるwordpressも一緒に学ぶセットコースもあります。両方学ぶと、デザインからコーディングまで一貫して案件を受注でき、単価が1.8倍くらい上がります。オンライン上で質問できること、パーソナルメンターがつき、勉強方法のサポートなどもしてくれるのが特徴です。

 

テックキャンプ

HTML, CSS, Javascrip、ウェブデザインの他にもAI、VR、iphoneアプリなどが定額で学び放題です。こちらはオンラインからも、実際に教室に行っても質問が可能です。初回は無料相談をしながら実際のカリキュラムを受講体験することができます。