文字の装飾で何ができる？どんな種類があるか見てみよう

これまでWEBデザインの概要や、WEBデザイナーの働き方について簡単に解説してきました。
今回からは、より実践的なお話をしていきたいと谷宜樹は考えています。
WEBデザインとはつまりこういうことをしているのだと、知っていただいたら嬉しいです。
今回は、WEBデザインの基本でもある文字の装飾について、谷宜樹が解説していきましょう。

■文字を装飾するとどうなる？

WEBデザインをするにあたって、文中や画像に入れる文字を装飾することはとても重要な意味を持ちます。
色やフォント、大きさによって人に与える印象が変わるというのは、初心者の方でも何となく分かっているでしょう。
最も伝えたいことをより効果的にアピールするため、多くの人の目に留まるため、より視覚的に分かりやすい説明にするために、文字の装飾が行われることがあります。
例えば、黒一色で書かれた文中に1つだけ赤い文字で書かれた単語があったら、その単語の方が目に留まりますよね。
重要なポイントだと分かったり、記憶に残りやすくなったりするでしょう。
他にも影を付ける、フォントを変える、輪郭を付けるなども、文字を目立たせる効果があります。

■どんなデザインがあるか見てみよう

画像編集ソフトなどを使っている人は、自分の持っているツールがどんな文字を作れるか試してみると良いでしょう。
今回は、一般的によく使われるものを谷宜樹が紹介します。

・文字の色を変える
タイトルや1つの単語を同じ色にする方法と、1つの文の中に色を混ぜる方法があります。
例えば「誕生日おめでとう」という文を装飾してみましょう。
一文全てを赤い色にした場合と、赤と白を交互に配色した場合では印象が違いますよね。
前者はメッセージを強調させるイメージに、後者はよりポップにおめでたいイメージになるでしょう。

・輪郭をつける
文字を囲んだ線をつけることです。
また、この線だけ残して内側の色を塗らない設定にすると「袋文字」になります。
白黒のページでも文字を強調することができ、カラーにするよりも統一感が出ます。

・影をつける
より立体的に見える装飾です。
影の向きや長さを変えることもできます。
ただし、影の位置はページ内で統一しないと違和感が生まれるので注意しましょう。

・先端にアクセントを持たせる
文字の「とめ」「はね」「はらい」などに丸い点をつけたり、うずまきのような模様をつけたりすると遊び心のある印象になります。
角が丸い「丸ゴシック体」というフォントの場合に使うと良いですね。

文字装飾は、他にもたくさんの種類があります。
お使いのツールを色々いじってみて、どんな印象を与えられそうか調べてみてくださいね。

WEBデザインを勉強する！実践が一番大切

WEBデザイナーになるためには、技術と知識の習得が必要です。
独学でも学校でも学ぶことはできますが、学習だけでなく実践を繰り返すことでセンスやスキルが身に付くと谷宜樹は思います。
今回は独学にせよ学校で学ぶにせよ、必要になるWEBデザインの勉強について谷宜樹が解説していきましょう。

■マークアップ言語を習得しよう

以前、HTML・CSSなどの「マークアップ言語」について紹介しました。
この言語を理解しないとWEBデザインはできません。
まずは、よく使われているHTMLとCSSをしっかり勉強しましょう。
入門レベルのもので構わないので、テキストを購入するのが谷宜樹のおすすめです。
ネットでも情報は出ていますが、これを読めば理解できるほど簡単ではありません。
古いやり方のようにも見えますが、テキストを片手にパソコンに向かい、実際にコードを入力しながら学習するのが一番覚えやすいのです。
理論を理解するというよりは、実際に手順を繰り返しながら体に覚えさせていきましょう。
「どういうことか分からない」と思っても気にせず進んでください。
ここで重要なのは、何も見ずにコード入力できるとか、理論を正しく理解するということではありません。
「このコードを入力するとこんなWEBデザインになるんだ」という確認作業でしかないので、あまり難しく考えずに進めましょう。

■早速実践！WEBサイトを作ってみよう

マークアップ言語の勉強が進んでくると、急に飽きてしまうことがあります。
毎日英数字の羅列を見ていたら、疲れてきますよね。
そういう時は試しに、WEBサイトを作ってみるのも面白いと谷宜樹は思います。
「WEBデザインの知識がまだ足りない」と遠慮する必要はありません。
実際にコード入力をして、サイトページにどう反映されるのかチェックしてみるのも良い勉強です。
とりあえず覚えたコードを入力してみて、自分のサイトを色々いじってみましょう。
思った通りにならなければ、またテキストを見返せば答えが分かります。
マークアップ言語の練習と併せて、気が向いた時にWEBサイトを作ってみてくださいね。

■好きなデザインを真似してみよう！Photoshopを使っても良い

WEBサイトを作ってみようと言っても、どんなサイトデザインにしたら良いか全く思いつかない時もあるでしょう。。
その場合は、企業広告でも通販ショップでも何でも良いですので、好きなWEBページのデザインを真似してみてください。
Photoshopなどのツールを使って、既存のWEBページと同じものが作れるか試してみるのもおすすめです。
文字の大きさや色、動きなどを再現しているうちに、「なぜここはこういうデザインにしたのか」ということに気が付くかもしれません。
技術もセンスも磨くことができるので、谷宜樹のおすすめです。

WEBデザインの勉強は、「サクサク学習・繰り返し実践」が効果的です。
気になるデザインはどんどん試してみて、体に覚えさせていきましょう。

企業のサイトに不可欠？LPの意味を整理しよう

前回は、WEBデザインの構成について谷宜樹が解説しました。
今回は、その解説で出てきた「LP（ランディングページ）」について、詳しく見ていきましょう。
企業のホームページやブログ、サイトのLPとは何でしょうか。

■「LP」とは？

LP（ランディングページ）とは、大きく分けて2つの意味があります。
広い意味での場合と、狭い意味での場合では定義が違います。

・広義でのLP
訪問者が最初にアクセスするページという意味です。
例えば、「りんご」と検索していくつかの結果が表示され、そのうちの1つ「青森県産りんご直売店」のサイトをクリックしたとします。
クリックしてから一番最初に出てきた「青森県産りんご直売店」サイトのトップページがLPです。
また、他のサイトを見ている時にポップアップ広告などが出てくることもありますよね。
それをクリックして出てきたページもLPになります。

・狭義でのLP
訪問者が何らかのアクションを起こすことを誘導するためのページという意味です。
例えば、先ほどのりんご直売店を使って考えてみましょう。
狭義では、実際にりんごを購入させるための注文入力画面や、りんご直売店へ直接メールを送るためのお問合せフォーム画面がLPとなります。
検索からの流入の場合、「りんご直売店　注文」「りんご直売店　問い合わせ」というワードからこのページにたどり着くことが多いでしょう。

■WEBデザインでは狭義を考えよう

LPには広義・狭義があり、それぞれかなり意味が違いますね。
Googleアナリティクスというアクセス解析ツールで出てくる「ランディングページ」は、広義の意味です。
検索からのアクセスを増やしたい、広告を貼ってアクセスを増やしたいという場合は、広義LP、つまりトップページの工夫が必要になります。
しかし、WEBデザインにおいて注目すべきは狭義の方です。
WEBマーケティングやWEBデザイン制作についての解説では、サイトのトップページを「LP」とは言わないのが普通だと谷宜樹は思います。
ここで語られているのは狭義のLPなので、間違わないように注意しましょう。

■LPの特徴は？

狭義のLPについて見てみましょう。
これは営業のためのページであるため、集客から注文・問い合わせまでを1枚で表現することが求められます。
営業担当者がセールスしているような内容となり、情報量も多くなるので、縦長のページであることが一般的です。
また、トップページなどと違って1枚で完結する内容にしているので、他のページへのリンクがあまり貼られていないでしょう。
逆にリンクを貼ってしまうと、注文・問い合わせページから離脱し、訪問者のアクションを逃してしまう可能性があります。

LPには広い意味と狭い意味があることが分かりましたか？
SEO対策には広義の方を、WEBデザインには狭義の方を考えると覚えておいてくださいね。

どんなデザインになっている？WEBサイトを効果的にするには

企業のホームページをじっくり見てみたことはありますか？
書かれている内容を読んだことはあっても、WEBページの構成がどうなっているかまでは気にしていない人がほとんどでしょう。
今回は、サイトやホームページでよく見られるWEBデザインについて、谷宜樹が解説していきます。

■WEBページは三部構成が基本

サイトやコンテンツのWEBページは、三部構成が基本だと言われています。
WEBページに掲載したいことを3つのエリアに分けてデザインすると、分かりやすく見やすいサイトになります。
3つのエリアの内容をそれぞれ整理してみましょう。

①ファーストビュー
WEBページを開いた時、最初に出てくる画面のことです。
キャッチコピーやリード文を使い、まずはサイトに訪れた人を惹きつけましょう。
ここで訪問者が「続きを見たい」と思ってくれれば、スクロールしてくれます。
サイトの内容が読まれるかどうかが決まる大切な画面ですね。

②本文
最も伝えたいことを記載する画面です。
商品の説明や企業の紹介、サービスの利点などを入力します。
小見出しをつけるなど、視覚的に分かりやすくデザインしましょう。
十分な情報量になっていないと、検索した時に上位表示されません。

③クローズ文・CTA
クローズ文でWEBページの内容をまとめます。
「CTA」とは「Call To Action」の略で、サイトの訪問者が行動を起こすのを促す要素と定義されています。
つまり、サイトの内容を読んだ訪問者がお問合せメールを送ったり、会員登録したりするためのボタンのことですね。
例えば会員登録したい場合、登録画面ページのURLを記載しておくのではなく、赤い長方形で囲われたボタンに「無料登録はこちら」と記載し、それを押せば登録画面へ移動するようにしておくのがCTAです。
これはWEBページの最後だけでなく、ファーストビューや本文中、ヘッダーのメニューバーにも記載されることがあります。

■どのページにも応用できる！

①～③の構成を意識しながらWEBページのレイアウトをすれば、見る人が理解しやすいWEBデザインになるでしょう。
この三部構成は、企業のホームページだけでなく、「LP（ランディングページ）」と呼ばれる商品の注文画面やイベントの予約画面、求人募集への申し込み画面などに効果的だと谷宜樹は思います。
他のページとこのLPがどう違うのかはまた次回お話したいと思いますが、ここにも三部構成が使われていることが多いです。
どんな内容のサイト・ページであっても、三部構成を意識したWEBデザインにすることでより効果的に伝えることができます。

WEBデザインには、基本的なルールがいくつか存在しています。
今回はその中でも、谷宜樹が最も大切にしている構成の作り方について解説しました。
サイトを作る際には、まず構成から考えてみてくださいね。

ポートフォリオを作ろう！自分の能力を確認&アピール

WEBデザインでは、図形や色が与えるイメージや、効果的な言葉選びについての知識が必要です。
独学や学校で学んでいる人は、難しい理論に頭を悩ませることもあるでしょう。
実際にアプリケーションツールを使ってWEBデザインの勉強を始めた人も、なかなか形にならなくて面白くないと感じるかもしれません。
そんな時は、自分がどこまで知識を身に付けたのか、デザインのセンスがあるか知るために「ポートフォリオ」を作ってみると良いでしょう。
今回は、谷宜樹が実践的なサイトの作り方を紹介します。

■「ポートフォリオ」とは？

投資の世界でも聞く言葉ですが、WEBデザインの分野においては「自分の作品（デザイン）をまとめたもの」を表します。
本来は書類をまとめるためのケースという意味ですが、クライアントに対してWEBデザイナーが自分の実績をアピールするために使う作品集のようなものですね。
谷宜樹も、クライアントに営業をかける際には、まずポートフォリオを使って実績を提示します。
WEBデザイナーはそれぞれ得意とするものが違い、好んで使うデザインもあります。
クライアントはWEBデザイナーを選ぶ際の基準として、ポートフォリオの中身や実績内容を重視していることもあるでしょう。

■初心者でもポートフォリオが必要？

WEBデザイナーとしての実績が不十分であっても、ポートフォリオを作った方が良いと谷宜樹は考えます。
アピールできるほどの実績がなくても構いません。
まずは自分がどのようなデザインを得意としているかクライアントに見てもらいましょう。
WEBデザインの勉強中であれば、これまでの学習内容をまとめてみてくださいね。
学校に通っている人は、講師から添削してもらうのも谷宜樹のおすすめです。
「レポートを提出しなさい」と言われていなくても、自分で自分をテストしてみれば良いのです。
これまで学んできて知識が付いたと思っていても、いざWEBデザインを作ってみようとすると手が止まるかもしれません。
学んだことをすぐに実践するということを繰り返せば、より自分の力になるでしょう。

■何をポートフォリオに記載する？

ポートフォリオに記載すると良い項目について、谷宜樹が基本的なものを紹介します。

・自己紹介
まずは自分のプロフィールをまとめてみましょう。
何を伝えたいかではなく、クライアントが何を知りたいと思うか考えてみてください。
実績があればここでアピールします。

・作品紹介
今までに作ったWEBデザインを載せます。
それぞれに工夫した点やクライアントの評価などの説明を加えるとより好印象です。

・スキルを自己評価
自分ができることをまとめておきましょう。
使えるツールや言語、どれくらい使いこなせるかを自己評価します。
レベルを3～5段階で表すのも谷宜樹のおすすめです。

 

今回谷宜樹が紹介したもの以外にも、ポートフォリオに加えると良いものがあります。
テーマによっても必要となってくるものが違うので、よく考えて選んでみましょう。