webデザインの基本の考え方〜これから学び始める方へ

webデザインの基本の考え方〜これから学び始める方へ

タカハシサトシです!

地方で10年、企画の仕事をしています。
その前はデザインの仕事をしていました。

今回は、

初心者です。webデザインの基本はどのように学ぶとよいでしょうか。

という声にお答えします。

webデザインは、そのwebサイトの見た目を設計することですが、アーティスティックに格好良く作れば良いわけではありません。

それは、一言で言い表せないほど、様々な目的を持たせることができるからです。なのでデザインする前に、そのwebサイトが存在する「意味」をどうつけるかがより重要になります。

基本=「物事のおおもと」です。
webデザインのおおもとを抑えて良いデザインを作っていきましょう。

本記事の内容

1 webデザインの基本の考え方〜これから学び始める方へ
2 webデザインの基本の作り方〜どこからデザインすればよいか

では、みていきましょう!

1 webデザインの基本の考え方〜これから学び始める方へ

webデザインの基本の考え方〜これから学び始める方へ

スキルも重要ですが、それは基本ではありません。
その前に「基本=おおもと」を知り、もっと根本的な事をふまえてデザインすべきでしょう。

基本① 自信・自己肯定

僕は形をつくるのが精一杯で苦労しました・・・。余裕もなかったし、そもそも何を学んだら良いかもわかりませんでした。

デザインはそれなりにできたので、見様見真似で何かしらの形は作れるけれども、それが意味あるものなのかどうかは自信が無い状態。

これは経験が浅いということもありますが、それだけでもなく、形をつくった時に、「これはこういう理由でこういう形だよな」と明文化できるかどうかです。これは自信、自己肯定感がないとなかなかできません。

僕は、自分の頭でその形に意味をつけたり、ロジカルに考えるのが苦手でしたので、余計に難しかった。いつも「正解」を探している状態と言えば良いでしょうか。

そんな感覚派の場合は、意味が重要と言われても、どのようにつけたらよいかも難しいので、次の②と③を知っておくことで明文化が少し簡単になります。

基本② 誰のwebサイトか

言葉で書くと当たり前ですが、これを抑えることが重要です。

形にすること=テクニックばかりを考えていると、こういった文脈が疎かになります。よく本を呼んだり、コミュニケーションが得意な人にとっては、当たり前の感覚ですが、文章力がない人には結構きつい問題です。

文章力は、

・要約する力
・文脈を作れる力

です。

起承転結があり、要点を押さえることができれば説得力が増しますよね。この文章力が備わっているかでデザインが変わってきます。

とすると答えは文章を書いて書いて書きまくることが大切となりますが、今回の記事では僕のような「文章が苦手な人」を対象としていますので、まずは「誰か」を意識することにしましょう。

それは企業なのか、商品なのか、イベント主催者なのか、キャンペーン主催者なのか。このサイトの主語はだれかによって、表現の方向性が見え、統一感が生まれます。

ブランド表現の場だということ

もう少し詳しく言えば、ブランドを表現するということになります。
ブランドと聞くと、高価なバッグやファッションを想像しますが、それだけではなくブランドは何にでも存在するものです。

その形や名前を聞いただけで高価なバッグを想起できるものもブランドであり、1人キャンプが好きな若い男性に響く商品もまたブランドです。

よって、影響を与えるターゲットやテーマ、エリアによっても、そのブランドの強さは変わるし、表現や伝え方も変わります。

webデザインで「誰のサイトか」を考えた後は、「どんなブランドか」を明文化させる必要があります。これも考えながら、形を起こしていく作業になるでしょう。

基本③ 「誰に見てほしいか」

これも当然の発想ですね。

誰のサイトか、そしてどんなブランドかを考えていくと、誰に見てほしいかによってブランドの方向性は決まるし、ビジネスならば誰に売ればよいかが見えてきます。

マーケティングにつなげよう

webサイトはブランドの表現の場であると同時に、影響を与えたいターゲットにブランドを伝えるチャンスでもあります。

それは、顧客をつかむ可能性があるということですし、売れる仕組みの一端を担うことができるということです。

そのブランドを見てほしいターゲットに対して提案をするわけです。それは、ターゲットからすれば興味のある事であり、価値のある事であり、webサイトをきっかけにして顧客になったのならば、どんな良い未来が待っているか、そんな期待への答えまでもが、webサイトに意味として持たせることができます。

そう考えると、それを表現して見る人に伝えるwebデザインの役割は重要であり、小手先の表現にこだわるよりも、①〜③の基本にこだわった方がよっぽど意味あるサイトに仕上がるでしょう。

2 webデザインの基本の作り方〜どこからデザインすればよいか

webデザインの基本の作り方〜どこからデザインすればよいか

前項までが「基本」ですが、基本を抑えれば見た目がイマイチでも良いわけないですよね。ダサいwebサイトは、当然ながら喜ばれません。

では、実際どのように作ればよいか、その答えは以下の3つ

①サイトの目的
②タイトル、ロゴ
③メインイメージとコピー

説明しますね。

①サイトの目的

前項までを総括すると、これを文章でまとめられたらOKです。

1)webサイトの運営者がなぜこのサイトを立ち上げたいか
2)webサイトを訪れた方がこれをきっかけにどうなるか

この2つの問いに答えられたらそれで良いです。
そしてその答えは小学生でもわかるような文章を意識して書いてみると良いでしょう。

例えばこのブログ。

1)自分らしく何かにチャレンジするきっかけになる
2)チャレンジして自信がつく、夢を叶える

上記を目的にしています。

②タイトル・ロゴ

僕のwebデザインの作り方は、とにもかくにもロゴデザインから作ります。苦手ですけどね。その際に、タイトルも決めます。

この部分が「誰が」を考え決める部分に相当します。

なぜ始めにここから取り組むかと言うと、webサイトを訪れた方の印象が大切だからです。導線を設計したり、文脈を考えたり、意味をつけたり、クリック率を考慮したりといったロジカルな部分は後回しで、まずは第一印象が重要なのでロゴにこだわります。

自分のセンスを頼りに作りますが、頭のどこかで小さな決断を繰り返します。その形で良いという判断をし続けるわけです。よく考えて作ろうと、かっこいいものを作ろうと、結局はひとつの形になったのならば、そこに意味はあります。その小さな決断を信じるのです。

ロゴが決まれば、それがデザインの方向性を決めます。カラーリングもそうですし、ターゲットが好む雰囲気に寄せることもできます。

③メインイメージとコピー

はじめに目につくイメージは重要です。

ここまででデザインの方向性は定まっているので、真っ先に伝えたいことをイメージに込めればOK。キャッチコピーにもこだわりましょう。

Illustratorの真っ白なアートボードに、ロゴとイメージとコピーだけでレイアウトしてみた時に、そのサイトの世界が見えるようなら、後は肉付けをする感覚で良いです。

まとめ:webデザインの基本は、おおもとを決めること

webデザインの基本は、おおもとを決めること

webデザインの基本=意味づけです。

webデザインは形にする仕事ですが、その形になるまでにwebデザイナーは小さな決断を繰り返します。

どう決断するかが「基本」であり、何となくデザインが決まっても、よく考えて決まったとしても、自信をもって意味をつけるべきであり、そして実際に訪れた人がどんな意味をつけるかで価値が決まります。

しっかりと意味をつけられる自分自身を磨いていきましょう。

関連記事

  1. デザイナーから異業種転職のすすめ【自分を取り戻そう】

    デザイン

    デザイナーから異業種転職がおすすめ!重宝される理由

    ⇒別な切り口で続編記事を書きました!こんにちは、タカハシサト…

  2. 【副業】webデザイン初心者が独学で勉強する方法〜おすすめの練習方法

    デザイン

    【副業】webデザイン初心者が独学で勉強!おすすめの練習方法

    タカハシサトシです!地方で10年、企画の仕事をしています。今…

  3. webデザインをスクールで学びたい社会人におすすめの始め方

    デザイン

    webデザインをスクールで学びたい社会人におすすめの始め方

    タカハシサトシです!地方で10年、企画の仕事をしています。そ…

 

チャレンジ応援のまとめ記事

  1. 【初心者向け】タスク管理(todo)の始め方〜目標の作り方・目標達成のコツを解説

    レコメンド

    タスク管理の始め方・目標をつくり挑戦しよう

    タスク管理を始めたい方向けの記事です。また、目標の作り方とタスク管理を活用した目標達成のコツを初心者にも優しく解説しています。

  2. webデザインの始め方・学びながら挑戦しよう

    レコメンド

    webデザインの始め方・学びながら挑戦しよう

    webデザインを始めたい方向けの記事です。本質を知り、独学やスクールで学び、プロの仕事に挑戦しよう。

  3. マーケティングの始め方・集客を学び挑戦しよう

    レコメンド

    マーケティングの始め方・集客を学び挑戦しよう

    マーケティングを学びたい方向けの記事です。マーケターを目指し、集客に挑戦しよう。

  4. 新しい事業の始め方・企画づくりに挑戦しよう

    レコメンド

    新しい事業の始め方・企画づくりに挑戦しよう

    企画職の方、また企画の仕事を目指している方へ向けた、まとめ記事です。企画職を目指し、事業を起こそう。

 

グラスの商品・サービス

  1. グラスの手帳|文庫本サイズ

    グラス

    グラスの手帳|文庫本サイズ

    当方で商品開発した、グラスの手帳を数量限定販売いたします。1冊550円(税込)で販売中。

  2.   ラクーン(raccoon)ホームページ更新専門店

    グラス

    ラクーン(raccoon)|ホームページ更新専門店

    SNSですぐ頼んで完了!ホームページ更新専門店。ちょっとした修正、簡単なニュースなど、気持ちも手も回らない担当者さんへ。1作業1,000円(税込)〜。

  3.   【提案無料】グラスのweb制作

    グラス

    【提案無料】グラスのweb制作

    小さく始めて大きく育てる、新事業のチャレンジに最適な、ミニマムなweb制作のご提案です。99,000円(税込)〜

アーカイブ

PAGE TOP