- BLOGトップ
-
目的別
- 目的別TOP
- コーポレートサイト
- ECサイト
- オウンドメディア
- 採用サイト
- プロモーション
- Webサービス
- LP
- ブランディング
-
Web制作ハウツー
- Web制作ハウツーTOP
- UIUX・サイト設計
- Webデザイン
- PM/ディレクション
- フロントエンド(HTML/CSS)
- 撮影・動画編集
- ライティング
- CMS
- Web制作ツール
- イラスト
-
システム開発
- システム開発TOP
- プログラミング
- ECサイト構築
- CMS開発・構築
- サーバ構築
- データベース構築
- セキュリティー
-
Webサイト運用のコツ
- Webサイト運用のコツTOP
- サイト運用・管理・保守
- コンテンツ運用
- CRM(顧客管理)
-
Webマーケティング
- WebマーケティングTOP
- SEO対策
- SEOライティング
- アクセス解析
- Web広告
- Web集客
-
特集
- 特集TOP
- Web最新トレンド
- カルチャー
- ガジェット
Webサイトで使うイラストの制作フローと依頼のポイントをWeb制作会社が解説します
- Web制作ハウツー
- Webデザイン
- イラスト
「自社のWebサイトは他社とひと味違うものにしたい」
「事業内容をわかりやすく伝えられるサイトにしたい」
あなたがそうお考えなら、イラストが役に立つかもしれません。
一般的にWebサイトでは写真がよく使われますが、個性を際立たせたり、説明を瞬時に理解させたりするならイラストが有効です。しかしオーダーメイドで作るとなると、手間と費用がかかりそうで躊躇してしまうのではないでしょうか。
本記事ではWebサイトで使うイラストの制作フローと依頼のポイントについて解説します。イラストの役割やメリットもわかりますので、「サイトでイラスト使ってみようかな」と思っている方はぜひ最後までお読みください。
ではいってみましょう。
Webサイトイラストのトレンドの変遷
Webサイトに使用するイラストのトレンドは、過去から現在にかけて大きく変化してきました。
初期のWebサイトでは、シンプルなアニメーションやスタティックなイラストが使用されていました。しかし、Web技術の進歩とともに、より複雑なグラフィックスやアニメーションが可能になり、Webサイトに使用されるイラストのデザインも変化しています。
2000年代初頭には、フラッシュを使用した多様なアニメーションが登場しましたが、セキュリティの脆弱性やメモリの大量消費などの理由で衰退します。
2010年代に入るとフラットデザインが主流となり、イラストも立体感や質感などの演出が少ないフラットなものが多く使用されるようになりました。また、手描きイラストやアナログ風のイラストが人気を博し、シンプルなベクターイラストも一般的になっています。
現在Webサイトでよく使われるイラスト
イラストは現在もWebサイトに取り入れられており、いっそう多様になっています。人気のあるイラストの種類を以下に5つピックアップしました。
アイソメトリック
斜め上から見下ろす視点で対象物を立体的に表現する技法。その企業ならではの事業内容、パーパス、世界観など、文字や写真では伝えきれないことを視覚的に表現することができます。
アイディア株式会社様のサイトでは、難解に見えるサービスをわかりやすく表現するために、アイソメトリックデザインのイラストとアニメーションを取り入れました。
https://aidea.biz/
フラット
図形、色の面を組み合わせて表現する技法。フラットもWebサイトでよく使われますが、アイソメトリックよりやわらかい印象です。
https://byard.io/
手書き風
水彩画やペン画のように手で描いた風合いのイラスト。弊社でもときどき扱います。
手書き風イラストを使うメリットはユニークで、独自の雰囲気が作り出せることです。また、親しみやすさと柔らかさを演出することもできます。
https://village.town/
ラインアート
いわゆる線画のイラストです。シンプルかつメリハリのきいたわかりやすいイラストに向いています。弊社では岩手銀行様のコーポレートサイトで取り入れました。
若い世代にも銀行を身近に感じてほしいという想いから、わかりやすさと快適な操作性を併せ持つデザインを意識し、オリジナルのイラストを各所に配置しています。
https://www.iwatebank.co.jp/
コミカライズ
コミック調のゆるい雰囲気のイラストです。親しみやすいのはもちろんですが、可愛らしさやゆるさを前面に出して表現したいときに使います。「MILK JAPAN」のサイトのようにキャラクターが作られることもあります。
https://www.milkjapan.net/pc/
イラストの役割
明確な目的があるとき、イラストはWebサイトでとても効果的に働きます。
印象を柔らかくする
意外と多いのが、印象を柔らかくするためにイラストを使うケースです。たとえば医療系のサイトで患者さんの写真が出しにくい場合、イラストなら見る人の印象を和らげることができます。
わかりやすさ
イラストはサイト内コンテンツのわかりやすさを向上させます。商品の特徴やデータなど文字だけだとわかりにくい内容を視覚的に表現し、よりわかりやすく伝えることができるのです。
視覚的な魅力
イラストを使用することで視覚的な魅力が向上し、サイト全体の世界観が形成されます。イラストだけの働きではありませんが、欠かせない要素の一つです。コンテンツに興味を持ってもらいやすくなったり、説得力が増したりする効果も期待できます。
ブランドイメージの強化
Webサイトには企業やブランドのイメージを伝える役割があります。イメージにうまくハマれば、イラストは写真より独自性を表現しやすいです。
イラストを使用するメリット
イラストには以下のようなメリットがあります。写真では対応が難しいときに、問題を解決してくれるかもしれません。
欲しい画像が作りやすい
イラストなら簡単かつ具体的にほしい画像が作れます。撮影をしない案件ではとくに便利です。
サービスが多岐にわたる案件で、必要な画像をすべて撮影しようとすると、作業も費用も膨大になります。そんなときイラストなら具体的な注文に個別に対応できる上、撮影に比べてかなりリーズナブルです。
写真より個性的なサイトが作りやすい
イラストは写真に比べて個性的なサイトが作りやすいです。
たとえばサービスを扱う企業サイトの場合、商品のようなビジュアルがないため写真では競合と差を出しづらいです。しかしイラストならサービス内容を視覚化し、他社とは違う雰囲気のサイトにすることができます。
Webサイトのイラスト制作フロー(クーシーの場合)
Webサイトのイラスト制作でポイントになるのは、「どこに、どんな感じのイラストを入れるのか」です。ここではイラスト制作を進めていく手順をご紹介します。
Webサイトのページで使うイラストの場合
Webサイトのページで使うイラストの制作は、シンプルに表すと以下のようになります。
- ワイヤーフレームをもとにイラストが使える箇所をご提案
- イラストの「トーン」を作る
- ラフを作成
- サイトデザイン提出時にイラストのラフも一緒に提出
- クライアント様のOKが出たら、本制作着手
ワイヤーフレームを作った段階で、イラストを使った方がいい箇所があれば弊社からご提案します。イラスト制作やトーンについて、クライアント様が「OK」を出されたらラフを作成。ラフで完成イメージを確認した上で、イラストの本制作に入ります。
話し合いの中でイラスト制作が持ち上がってくることが多いので、いつもこのフローのとおりに進むとは限りません。進め方の一例とお考えください。
イラスト制作で大事な「トーン作り」
イラスト制作で大事なのは「トーン作り」です。トーン作成の工程では、以下のような点について、クライアント様と認識をすり合わせて決定していきます。
- 絵の方向性をどうするか
- カラーはどうするか
- 線はつけるか
- 線なしで塗りだけで表現するか
- アナログテイストにするか
- 人物に表情をつけるか
「絵の方向性」はトーン作りの中でもっとも重要です。ターゲット層に与えたい印象を考えつつ、デフォルメ具合などを決めていきます。
ここで決定したトーンをもとにすべてのイラストを作成するので、この段階でクライアント様と弊社で共通認識ができているかどうかがとても重要です。
うかがった内容はAD(アートディレクター)が持ち帰り、どんなイラストにするかを話し合います。決まったものをデザイナー、イラストレーターに発注してラフを作り、クライアント様にご提案するという流れです。
記事ページで使うイラストの場合
記事ページで使うイラストは、「ここにこんな感じのイラストを入れてほしい」とクライアント様側から注文があることが多いです。これに対して弊社側でラフを作成し、OKが出たら本制作に着手します。
Webサイトイラストを依頼する際のポイント
Webサイトで使うイラストの制作を依頼する際には、以下の点に気をつけましょう。
要望を明確にする
どこにどんなイラストを入れたいのか、要望を明確にしましょう。とはいえ、はじめから明確なイメージがあるケースは少ないと思います。トーン作成の段階で制作会社とよく話し合い、双方で共通認識ができれば問題ありません。
制作が進み始めてからのトーン変更は困難です。余計な費用が発生してしまうこともありますので、初期の段階でしっかりとイメージを固めておきましょう。
- サイト企画の基本〜インサイトで理解度を深める
イメージが共有できているか確認する
制作会社側がこちらの要望をきちんと汲み取れているか確認しましょう。既存のサイトやイラストのサンプルを示しながら話すと、誤解が生じにくくなります。
イメージの修正は工程が進むほど手間がかかるものです。話し合いの段階から認識にズレがないか注意し、怪しいなと思ったら質問するなどして不安要素を潰しましょう。
契約内容を確認する
納品後のイラストの使用について、契約内容を確認しておきましょう。Webサイト以外での使用の可否やレギュレーションがあれば、それに従います。
まとめ
以上、Webサイトで使用するイラストの制作についてお伝えしました。
制作に手間と費用がかかると思われがちなイラストですが、場合によっては写真より融通が利いて、リーズナブルに画像を作ることができます。他社サイトとの差別化も図りやすいので、目的や自社のイメージ戦略に合うようでしたら、ぜひ検討してみてください。
この記事を書いた人
クーシーブログ編集部
1999年に設立したweb制作会社。「ラスクル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。
お問い合わせはこちらから
Web制作デザイン、丸ごとお任せ
お問い合わせする
テキスト:加藤久佳 デザイン:大坂間琴美
Share on
Webデザイン・イラストの関連記事はこちら
-
【Webデザイン歴史】1991年〜2024年までの歴史をまるっと解説!
突然ですが、みなさんはこの流れをご存知でしょうか。 ①スキューモーフィズム → ②フラットデザイン → ③マテリアルデザイン → ④ニューモーフィズム どこかで耳にしたことがある人もいるかも知れません。実はこれがWebデザインの歴史の大まかな流れと言われています。 本記事ではこの流
- Webデザイン
- カルチャー
-
その手があったか!イラストの使い方がすごいコーポレートサイト11選
「おもしろい採用サイトあったら教えてください」と弊社のデザイナーに聞いてみたら、12サイトも集まったので紹介します。
- コーポレートサイト
- イラスト
-
Webフォントマスターへの道|なぜ重要?効果と影響を分かりやすく解説
普段から文書を作成するときに何気なく気分や好みで決めているフォントですが、Webデザインにおいて、フォントは非常に大きな影響力を持ちます。 ブランドの確立やユーザビリティの向上、ターゲット層の満足度など、サイト訪問者がそのサイトに対して抱く印象を大きく左右するWebフォント。今回はWebフォン
- Webデザイン
-
【画像生成AI】無料の3種を比較してみた|プロンプトはChatGPTで作成
この記事では画像生成AI3種でイラストと画像を作って比較しています。取り上げたサービスは「Stable Diffusion」「Midjourney」「Canva」です。無料で気軽に使い始められるものを選びました。
- イラスト
- ガジェット
-
Bento UIとは?機能性とデザイン性を両立させた新トレンドを解説!
みなさん「Bento UI」という言葉を聞いたことがあるでしょうか。 「ベントー?」 「お弁当のことかな?」 私が初めて聞いた時にはこのように思ってしまいました、、、 同じように思った方もいるかも知れません。 「Bento UI」とはまさに、日本の伝統文化「お弁当」がモチーフに
- Webデザイン
- Web最新トレンド
-
インフォグラフィックスの活用法!Webサイトのわかりやすい見せ方と作るコツ
「うちのWebサイト、あまり読んでもらえないなぁ。。。」 それは、Webページの「見せ方」がよくないのかもしれません。 じつは多くの場合、Webページはしっかりと読んでもらえていません。さーっと流し読みされているはずです。そんな中で、「お!」と目を留めてもらうには、いかに魅力的で分かりやすい
- Webデザイン
-
日本のWebデザインの特徴と文化的背景を分かりやすく解説
「日本のWebデザインは、海外と比べてどんな特徴があるのだろうか?」この記事はそんな疑問をお持ちの方のために、日本のWebデザイン文化とその特徴を詳しく解説します。日本のWebデザインの特徴は、ひとことで言うなら「美しさと機能性の調和」です。伝統とモダンなアプローチを融合し、ミニマリズム、色彩、ユー
- Webデザイン
-
【2024年のWebデザイントレンド】Web制作会社が注目する10選まとめ
この記事では2024年のWebデザインで注目すべき10のトレンドをご紹介します。「他社のサイトとひと味違うデザインを取り入れたい」「自社に合ったデザイン表現を探している」「デザインのトレンドは押さえておきたい」という方はぜひ読んでみてください!本記事でご紹介するデザインは主に海外のトレンドから厳選し
- Webデザイン
- Web最新トレンド
記事を読んだあなたにおすすめしたいCOOSYの制作実績
-
エスモード・東京校
エスモード・東京校様のコーポレートサイトリニューアルを担当させていただきました。他の服飾学校にはない同社の特色が伝わるサイトを目指し、設計やデザインを行っています。
-
神戸電子専門学校
神戸電子専門学校のサイトリニューアルを行いました。前回2015年のリニューアルから数年が経過し、その間に社会情勢も大きく変化しました。今回のリニューアルでは、「Z世代」に向けたアプローチを軸にプロジェクトを開始しました。
-
大和アセットマネジメント株式会社/NASDAQ100
大和アセットマネジメント株式会社様が運営する、NASDAQ100プロモーションサイトをリニューアルさせていただきました。ターゲットに合わせたコンテンツ企画やプロモーション用の動画制作など、様々な角度から同商品のプロモーションを行っています。
-
株式会社 マスダック
株式会社マスダック様のコーポレートサイトをリニューアルさせていただきました。お問い合わせの増加を目指し、コンバージョンまでの導線確保やユーザビリティの強化などを行っています。
Web制作の課題はクーシーが解決します
-
クーシーのサービス
クーシーは、最適なチームでの設計と細部まで手が行き届く「ものづくり」で、みなさんのWebビジネス応援します
-
Webサイトデザイン
EC、コーポレート、eラーニング、SNS、基幹システムなどあらゆるジャンルのWebサイトを手がけています。
-
ブランディング
自社がどのようなイメージで見られたいか、コンセプトを作成しロゴやWebサイトで表現します。
CATEGORY LIST
-
すべての記事一覧
-
目的別
- 目的別TOP
- コーポレートサイト
- ECサイト
- オウンドメディア
- 採用サイト
- プロモーション
- Webサービス
- LP
- ブランディング
-
Web制作ハウツー
- Web制作ハウツーTOP
- UIUX・サイト設計
- Webデザイン
- PM/ディレクション
- フロントエンド(HTML/CSS)
- 撮影・動画編集
- ライティング
- CMS
- Web制作ツール
- イラスト
-
システム開発
- システム開発TOP
- プログラミング
- ECサイト構築
- CMS開発・構築
- サーバ構築
- データベース構築
- セキュリティー
-
Webサイト運用のコツ
- Webサイト運用のコツTOP
- サイト運用・管理・保守
- コンテンツ運用
- CRM(顧客管理)
-
Webマーケティング
- WebマーケティングTOP
- SEO対策
- SEOライティング
- アクセス解析
- Web広告
- Web集客
-
特集
- 特集TOP
- Web最新トレンド
- カルチャー
- ガジェット
-
Webサイト・アプリなどの
様々な実例・制作実績のご紹介 -
Webサイトのご相談、お見積もりはこちらから
Webサイトのご相談、お見積もりなど
お気軽にお問い合わせください