ホームページをデザインする時、一番大切なのはページを見るユーザの経験を考える事。ユーザーエクスペリエンス、UXと呼ばれています。つまりユーザがホームページを操作しやすいか。コンテンツを興味深く見て、ホームページで提供しているサービス利用や商品購入につながる経験となるか。この事を考えてデザインを設計する必要があります。
デザインのツールは世の中にたくさんありますが、この記事ではillustratorによるデザインスキルと、スキルを習得するためのスクール活用方法を説明します。
ホームページ充実のためにillustratorを学ぼう
皆さんのPCやスマホに入っている、GoogleChromeやEdge、safariといったインタネットブラウザで表示されるインターネットページの事を総称してホームページと呼んでいます。最近はPC性能やネットワークスピードの向上により、芸術品の様な美しいページや、たくさんの機能が盛り込まれたページも珍しく無くなりました。
ホームページのコンテンツを充実させる方法は2つあります。
①プログラミングを組み込んだ動きのあるページを作る
写真にカーソルを当てるとポップアップ表示される、メニューバーが可動式である、ホームページ閲覧者ごとにカスタマイズされたページが表示される、など機能の面でコンテンツを充実させる方法です。
生活の中で利用されているショッピングサイトや動画閲覧サイトなどWebアプリと呼ばれるレベルまでになると、かなり専門的なプログラミングスキルが必要です。
しかし、制作スキルを習得できればITエンジニアとしてキャリアップ、副業として個人ホームページを開設する、などの事もできます。
②ロゴやアイコン、ページレイアウトといったデザイン面を磨く
ホームページのデザインによって、表示した際のインパクトは大きく異なります。
人間工学に基づいた見やすいレイアウトや、目を引くアイコンといったデザインは、せっかく作って公開したホームページを十分に見てもらえるかという所に直結します。
この記事では、デザイン面でホームページを充実させる方法を説明していきます。
デザインの重要性
ホームページを開設する際にデザインが重要となる理由は2つあります。
自社が提供するサービスへの集客
ユーザがホームページを開いた時の視覚的な印象はユーザに大きな影響を及ぼし、自社の存在や雰囲気を覚えてもらう事につながります。競合相手との差別化を図る上で、ホームページのデザインで自社のアピールポイントを伝える事が重要となります。
複数種類のデバイスに対する最適な表示
一昔前は、インターネットでホームページを見るのはPCだけでしたが、最近はPCのみでなくタブレット、スマホといった複数種類のデバイスで見られる事が普通となりました。日本での直近一年の表示デバイスシェアを見てみましょう。
2位以下は、どれも同じくらいのシェアになっており、色々なサイズのディスプレイで閲覧されている事が分かります。
1920×1080 18.26% PC
1366×768 7.53% PC
1536×864 7.42% PC
375×667 5.66% iPhone6,7,8
390×844 5.43% iPhone12,13,14
375×812 4.29% iPhoneX,11
それぞれのデバイスでのディスプレイの大きさを意識してデザインされていないと、表示時に縮小されてしまう、レイアウトが崩れるなどの現象が起こります。
その結果、ホームページの内容を十分に伝えられないばかりかそのページから離脱されてしまう事にもつながってしまいます。
この2つの項目に対しては、専用のデザインソフトを使ってホームページ制作をする事で対応する事ができます。デザインソフトの1つであるillustratorについて説明していきます。
illustratorでできる事
「illustrator」はadobe社から提供されている、グラフィックデザイン用のソフトウェアです。初心者からプロのデザイナーまで幅広く支持を得ています。
photoshopとの違い
同じadobe社から提供されている「photoshop」も有名ですが、機能と扱う画像の種類が異なります。
取り扱える画像の種類 | 機能 | |
illustrator | ベクトル画像
・点と線で構成された画像 ・拡大しても画像劣化しない |
線や図形、点などパーツを作成するための機能
・鉛筆、曲線描画ツール ・変形ツール ・透明化ツール |
photoshop | ビットマップ画像
・たくさんの点が集まった画像で一眼レフやスマートフォンで撮影したもの。拡大するとピンボケ、劣化する |
写真などの画像に、加工や補正を行うための機能
・ブラシツール ・塗りつぶし ・被写体の切り抜き ・3Dオブジェクトの作成 |
ページレイアウトデザイン
illustratorを使用すると、ホームページで表示したい文章や画像などの配置を、段組みを使ったレイアウトで設計できます。対象とするディスプレイのサイズに合わせてピッタリはまる設計となりますので、表示崩れの無いホームページとなります。
ホームページによっては、長年運用する場合の拡張性も最初に考えておく事は重要です。最初に書いたテキスト文章に、新たに追記する事もあるでしょう。あらかじめテキスト文章のエリアを確保しておく事でレイアウトを保って更新できるホームページになります。
ロゴやアイコンの作成
ホームページの見た目を引き立たせるロゴやアイコンも、illustratorで作成する事ができます。鉛筆ツールと曲線描画ツールを組み合わせてお好みの図形を作り、ホームページに使用するのに適した画像ファイル形式で保存する事ができます。
illustratorを学ぶ方法
illustratorには沢山の機能があります。プロも使用するソフトウェアだけに、使いこなせるか不安に思う方もいらっしゃるでしょう。初学者の方は、デザインの基本からソフトの操作までを効率的に学ぶため、スクールの活用をおススメします。
独学では難しい体系立てたカリキュラムでの学習により、デザインのスキルを習得しましょう。全国から探したスクールを2つご紹介します。
おススメスクール その1 「デジハリオンラインスクール」
公式サイトはこちら
・かかる費用
43,200円/33時間
・おすすめポイント
・「いつでも」「どこでも」「何度でも」学習できるオンライン形式
・illustratorの操作だけでなく、デザイン業界で活躍するためのノウハウも学べる
・企業との連携による、多様なニーズに対応できるコース
20年間蓄積してきたデジタルコンテンツ教育のノウハウから生み出されたオリジナルのテキストと、業界とのコネクションで就職や独立をかなえた90,000人もの卒業生を輩出しています。
おススメスクール その2 「Tech Teacher」
公式サイトはこちら
・かかる費用
3,960円/30分
・おすすめポイント
・生徒一人一人の家庭教師の様に、オーダーメイドのコース設定
・マンツーマンの指導により、自分の目標や学習状況に合わせて学べる。
・Webページ作成スキルであるHTML、CSS、JavaScriptのコースと併用して 充実したホームページ作成スキルが身につく。
illustratorに関する書籍や動画は沢山あります。しかし本当に実務で使えるノウハウが体系立てて整理されていないとどこから学べば良いのか悩んでしまうでしょう。
生徒個人に合わせて、基礎から応用までのカリキュラムを用意してくれるため、自分のペースで学びを進めることができます。
illustratorを習得した未来
illustratorを使って、自分でホームページのレイアウト制作やアイコン制作ができるようになると、どの様な事ができるでしょうか。ホームページは企業の顔として広告塔の役割を担います。企業の個性をデザインやアイコンで表現し、ホームページの訪問者に印象付ける事ができれば、企業のサービス利用申し込みや購入意欲につながります。
ホームページ制作と合わせてillustratorのスキルを身に着けると、WebデザイナーとしてIT企業で活躍する道も見えてきます。企業のホームページ開設率は日本では9割を超えており、販売戦略として重要視している事が解ります。これからも高いニーズがある市場です。
また、個人のホームページやSNSのアイコンを制作するデザイナーとして副業する事も出来るでしょう。
まとめ
一生ものの武器に出来るillustratorのデザインスキル、この記事でおススメしたスクールを活用して是非チャレンジしてみてください。