検索結果0件」

    【デザイナー向け】未経験から独学でWeb制作を始めるロードマップ

    2021/01/24
    【デザイナー向け】未経験から独学でWeb制作を始めるロードマップ

    こんにちは、シンヤです!
    今回は【デザイナー向け】未経験から独学でWeb制作を始めるロードマップというテーマでお話しします。


    まずは「デザインの語源」を知ろう

    Wikipediaの「デザイン」の項目には、以下のように書かれています。

    デザインの語源はデッサン(dessin)と同じく、“計画を記号に表す”という意味のラテン語designareである。
    つまりデザインとは、ある問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。
    デザイン - Wikipedia

    つまりデザインとは「計画を記号に表す」の語源である「desinare(デジナーレ)」が語源です。
    さらにdesignとは、日本語訳すると「設計」という意味です。

    つまりデザインとは「設計業務」の事なのです。
    さらに「設計」をGoogle検索すると、以下のように出てきます。

    ある目的を具体化するためのもくろみ。特に、土木・建築工事や機器などの製作の計画を図面や計算書などで具体化すること。

    つまり「デザイン = 設計業務」とは、

    1. 何らかの「目的」があって
    2. それを達成するためにはどうするか考えて
    3. 具体的な行動に落とし込んでいく事

    と言えると思います。


    「デザインの基本原則」を知ろう

    デザインには基本的な4つの原則が存在します。

    1. 接近
    2. 整列
    3. 反復
    4. 強弱

    それぞれ詳しく解説します。

    1. 接近

    近しい属性の要素や、関係している関連項目などは、お互い近づけて配置します。

    人間の目は「隣り合った複数の塊を、一つの物体として捉える」という特性があります。
    近づけることで「この情報は同じ属性を持った物体」と認識させることができます。

    逆を言えば、直接的に関係がない項目は、離して配置します。

    記事同士を近づけて配置

    2. 整列

    「接近」で同じ要素にしたものをページ上におく場合、端を揃えて配置します。
    要素同士の端が揃っていないと、ごちゃごちゃしてバランスが悪く見えてしまいます。

    画像とテキストや、上下の要素と整列させている

    3. 反復

    繰り返し使う要素は、幅・高さ・色等々を同じものにすることで、統一感が生まれます。

    ヘッダーや内容の幅や高さを揃えて、統一感を出す

    4. 強弱

    テキストの大きさや太さを変えたり、背景色を変えたりするテクニックです。
    要素の中で目立たせたいもの、控えめにしたいものを、視覚的に表すことができます。

    「強弱」のテクニックを使うことにより、メリハリのあるデザインを作ることが可能です。

    目立たせたいテキストは大きくして、重要ではないものは小さくする

    「色の使い方」を知ろう

    色の三属性

    色には「色相」「彩度」「明度」の3つの属性があります。
    これは色を扱う上で非常に重要な要素です。

    色相

    色相とは文字通り「色味」のことです。
    全ての色を円で繋げて、相関関係を表しています(上記のような輪を「色相環」といいます)。

    「色相環」は、色味を表す際頻繁に出てくるため、本格的にデザイナーを目指すなら知っておくべき要素です。


    彩度

    彩度とは「色の鮮やかさ」のことです。
    色相で決めた色の詳細な鮮やかさを決定する要素です。

    彩度が高くなると色が鮮やかになり、低くなると白に近づきます。


    明度

    明度とは「色の明るさ」のことです。
    明度が高くなると色が白に近づき、低くなると色が黒に近づきます。

    「RGB」と「CMYK」

    RGB CMYK
    色を加えるほど白に近づくので、別名「加法混色」と言われる。 色を加えるほど黒に近づくので、別名「減法混色」と言われる。
    主にWebやアプリなど、デジタルに関する制作物に使われる。 主にチラシやポスターなど、実際に印刷する制作物に使われる。

    色を使う際は上記の「RGB」「CMYK」の特性に合わせて、カラーモードを使い分けます。

    バナーなどの将来印刷する必要がない制作物は「RGB」で、プレゼンテーションなどの印刷する可能性があるものは「CMYK」で作成するのが、望ましいです。

    「暖色」と「寒色」と「中性色」

    色相環で表すと上記のようになります。

    食材を美味しそうに見せるには「暖色」、落ち着きを与えたい場合は「寒色」等々、制作物を通じて与えたい印象に合わせて、色を変えていきます。

    色が与える心理効果をうまく活用して、顧客に与えたい印象の制作物を作っていきます。

    暖色 寒色 中性色
    赤〜黄色 青〜青緑 緑〜青緑、紫〜赤紫
    暖かみや明るさ、活発さを与える 涼しさや静けさ、聡明さを与える 暖色に近ければ暖色より、寒色に近ければ寒色よりの印象を与える

    補色

    色相環同士で反対にある色を「補色」といいます。
    補色はお互い色を際立たせる効果があります。

    例えば、赤の背景に水色の丸があると、水色の丸がより目立ちます。
    緑の背景に紫の丸があると、紫の丸がより目立ちます。

    目立たせたい要素がある場合、補色を使うと非常に効果的です。

    ただし補色同士の色合いが同じだと、どちらが主張したい色なのかわからなくなります。
    使う場合は、お互いの色同士の比率を意識すると良いです。

    補色同士で構成された画像

    類似色

    色相環上で近しい色同士を「類似色」といいます。
    類似色も補色と同様、お互いの色を際立たせる効果を持ちます。

    しかし補色と違い、明確な対比構造になっていません。
    類似色を使う場合は、比率を「5:5」にするなど、お互いの色の比率を均一にすると効果的です。

    類似色同士で構成された画像

    三色ルール

    色は使えば使うほどいいものではありません。
    使う色は「三色以内」に抑えるのが理想です。

    三色以上の色を使うと、ごちゃごちゃした印象を与えてしまいます。
    制作物のまとまりがなくなり、見づらくなってしまいます。

    色が増えるほど、バランスが取りづらくなってしまうのです。


    「フォント」について知ろう

    「フォント」とは

    文字に適用する書体デザインそのものを差します。
    画面上にある文字を「書体」として成立させるために、様々なデータが格納されています。

    文字をパソコン上に表示する場合、必ずフォントを指定します。
    文字を書体として成立させるために、文字は必ずフォントと紐づいています。

    つまりフォントが存在しないと、パソコン上に文字を表示することができません。
    フォントが存在しない場合「フォントのリンク切れ」となり、正しい書体で文字を表示することができなくなります。

    「和文」と「欧文」

    フォントには必ず「和文」「欧文」が存在します。
    ざっくり区分すると、和文は「日本語由来のフォント」で、欧文は「英語由来のフォント」となります。

    和文 欧文
    ひらがな・カタカナ・漢字 英字・ラテンアルファベット・ローマ字

    「数字」の取り扱いについて

    「数字」については、和文と欧文両方存在します。
    漢数字は「和文」、英数字には「欧文」を使うことが望ましいです。

    しかし、フォントを使い分けないといけません。
    大変手間がかかるので、ほとんどの場合・・・

    • 漢数字・英数字
    • その他和文・欧文

    など、全て同じフォントで使うことが多いです。

    「等倍」と「プロポーショナル」フォント

    フォントには「等倍」「プロポーショナル」の2種類が存在します。

    等倍 プロポーショナル
    文字の幅が同じ 文字の幅がそれぞれ違う

    一般的なフォントは、文字の型付きを無くしバランスを取るために「プロポーショナルフォント 」が採用されています。

    「約物」と「カーニング」

    「カーニング」とは

    上記の図のように、文字と文字の空き(空白)を調整する技術のことです。
    文字同士で適切なカーニングを設定することで、見やすい文字を書くことができます。

    「約物」とは

    上記の図のような、句読点や括弧のことです。
    約物の場合は、大抵の場合左右に空白が入っています。

    上記の図のように、約物は適切にカーニングを行うことで、余計な空白がなくなり見やすい文章になります。


    未経験で独学でデザイナーになるためのロードマップ

    結論からいうと、僕は以下のように進むのがいいと考えています。

    1. 様々なサイトを見てみる
    2. 真似するサイトをピックアップする
    3. 課題の言語化をしてみる
    4. ツールの使い方を覚える
    5. ワイヤーフレームを作ってみる
    6. 実際にデザインを作ってみる
    7. クラウドワークスの案件をこなしてみる
    8. ポートフォリオサイトを作る
    9. Web・DTPの制作会社に就職して経験を積む

    人によっては、WordPressを使って「Webサイトのコーディング」をしてみるのも良いかと思います。

    ですが「デザイナーとしての基礎能力獲得」が最優先のため、コーディングは興味がある人だけで良いと思います。


    解説した技術を使って、制作物を作ってみる

    • デザインの基本4原則
    • 色の使い方
    • フォントの使い方

    これらを意識して、まずは制作物を作ってみましょう。
    実際に手を動かして作品を作ることが大切です。

    どんなツールを使えばいいか

    世の中には、多種多様様々なデザインツールがあります。
    例をあげると・・・

    これらがあると思います。
    結論からいうと、上記3ツールは全て使えるようになったほうがいいと思います。

    Illustratorは細かい図形の作成に使い、Photoshopは画像加工に使います。
    FigmaはWebデザインやアプリのUIを作る際に使います。

    どれか一つだけ使うのではなく、全て使います。
    用途に合わせてツールを使い分けています。

    まずは、Illustratorから使えるようになるといいと思います。
    全てのデザインツールの基礎で、かつどのツールにも応用ができる技術が手に入ります。


    デザインは「形」「色」「文字」で成り立っている

    記事の要点を解説すると、上記になります。
    デザインは「形」「色」「文字」の扱いに慣れれば、どなたでも良い制作物を作れます。

    デザイナーとして深いキャリアを積むか、今手掛けている仕事に活かすかは人それぞれです。
    ですがデザインをどのような使い方をするにしても、上記3つの基礎を覚えるのは非常に役に立ちます。

    今まで解説した技術は、以下の本でより詳細に学ぶことができます。


    最後に

    繰り返しになりますが、

    デザインは「形」「色」「文字」で成り立っている

    上記の言葉を忘れないでいただきたく思います。
    この言葉さえ胸に刻めば、どの仕事でも「デザインの力」を発揮させることができます。

    • 商品PRの為のチラシ
    • 新規顧客獲得の為のLP
    • ページへ誘導するためのバナー広告
    • プレゼン用のための資料
    • 資金調達獲得のための事業計画書
    • オリジナリティを出すための個人名刺

    などなど「目に見える制作物」を作る場合、全てに対して応用ができます。
    デザイナーになりたい方だけでなく、万人の仕事に「デザイン」は役に立ちます。

    今回は以上になります。

    • 【デザイナー向け】未経験から独学でWeb制作を始めるロードマップ