お久しぶりです、デザイナーの田中です。
今月も担当したウェブページのデザインについて紹介したいと思います。デザインの過程でイラスト制作にも携わらせていただいたのでwebページにおけるイラストを取り入れることのメリットも少しだけ載せてみました。
LP（ランディングページ）のデザイン
先月依頼を頂いたお客様から新たにwebページ制作の依頼をしていただきました。
今回は、先月制作したページと同じ階層の新規ページ制作と、今後もページを増やしていきたいとのことだったので、下層ページへの導線となるTOPページの作成依頼です。
どのお仕事もそうですが、会社として継続の依頼を頂き、私自身も引き続きお客様のページデザインの担当をさせていただけると決まったときはとても嬉しいです。
次回もまた依頼していただけるように力が入ります。
TOPページの制作
先に下層ページの作成を先月にしているので、雰囲気やパーツを継承しつつ、TOPページということで下層ページより目を引くようなデザインにしました。
今後も下層のコンテンツが増えていく予定のページなので数が増えてもデザインが崩れない長方形のバナーを設置して、下層ページへの移動を促せるようにしています。
下層ページの制作
今回の依頼ではイラスト5点の制作もさせていただきました。
実は田中、絵を描くことが好きでプライベートではよく時間をつくって手を動かしているので、仕事でもイラスト制作の機会をいただけて嬉しいです。
お客様から頂いた下記2点の情報をもとに作成をしていきました。具体例があってとても作業がしやすかったです。
▼イラストの説明
「どんなことを表現しているイラストなのか」の情報です。
参考イラストや写真のつぎはぎで提示していただいてもいいですし、もちろん文章の説明でも大丈夫ですよ！
▼イラストのタッチ
「どんな雰囲気のイラストなのか」の情報です。
リアルな感じ～、シンプルな感じ～などのご希望があれば伝えていただいています。
今回もコーダーさんが完成後のイラストを動かしてくれました！
少し切り分けにくいイラストを作ってしまったなと感じるので、切り分けて動かしてもきれいに見えるイラスト制作を今後は目指していきます。
トップページのイラストビジュアルの引継ぎ作成
先輩デザイナーが先に作成してくれていたイラストを引き継いで続きを作らせていただきました。
少しこった動きをするwebサイトなので最終的に制作したイラストのサイズは約5000px ×2500pxになりました。写真の元画像だと珍しくないサイズですが、横幅がだいたい1000px（PC版）ほどがメジャーなwebサイトに掲載するイラストのサイズとしてはだいぶ大きな部類だと思います。
こちらのイラストも動きを付けるためにパーツの切り分けをさせていただきました。
動きのあるサイトにしたいということは聞いていたので、ここは動かすことになるだろうな～というパーツはもともと切り分けて作成していたのですが、コーダーさんからここをこんな風に動かしたいから切り分けてほしい、方向転換するから横向きと正面のイラストも欲しいと言われたときはそんなところも動かすことができるのか…！と驚きました。
いつもたくさん学ばせていただいています。
三面図や主線のないイラストはあまり制作したことがなかったので貴重な経験になりました！
イラストを取り入れるメリット
写真やイラストを取り入れると文字だけの情報よりもユーザーが飽きずに見ることができるのでページの離脱を防ぐことができる、情景を想像させやすいなどのメリットがありますが今回はwebサイトにおけるイラストを取り入れるメリットについて少し紹介します。
▼情報がわかりやすい
写真だけでは伝わりにくい場面や、文章だけだとかえって情報が多くわかりづらくなってしまう場合があります。そんなときに抽象的な表現を取り入れながら情報を簡略化し表現できるイラストは視覚的にわかりやすく情報を伝えることができます。
デザインの仕事をさせていただく中で特に感情、表情の表現や、手順などの場景説明がイラストは得意だと感じました。
検査の手順やQ&Aページの補助に入れるとわかりやすいです。
▼長く掲載できる
被写体の方との相談次第だとは思いますが、ときどき現在のwebサイトに掲載されている写真の被写体の社員が退職することになったので別の写真orイラストに差し替えたいとご相談を頂くことがあります。
イラストの場合、基本的には掲載ができなくなるということはないと思うので、あとから変更をしてサイトのイメージが変わることが極力ないようにしたい…と考える場合には個人的におすすめです。
もちろん新しいお写真が必要となった際には、以前の撮影データの中からページにあった写真を選定させていただくことや、改めて撮影に伺うことも可能なのでご相談ください。
▼イメージの統一
サイト全体のデザインに合わせてイラストのタッチや、カラーを変更できるので印象の統一ができるのはイラストのいいところだと思います。
▼親しみやすい第一印象を与える
タッチの柔らかいイラストを使用することで親しみやすい印象を与えることができます。
病院のwebサイトだとどちらかというとイラストを使い親しみやすさを前面に押し出すことよりは、写真を使いリアリティや信頼感を感じさせるデザインを選択される場合が多いと思うのですが、産婦人科や小児科などお子様がかかわるような部門の特設サイト、新しい人材を取り入れる採用サイトなどで親しみやすさを一番与えたい印象だとする場合などには有効的です。
メインで使用せずに、端のほうにすこしだけあしらいとして入れるだけでも雰囲気が穏やかになります。
ほかにもいろいろありますが個人的には上記の4点がメリットだと思います。Webサイトが与えたい印象や、ユーザーに伝えるべき情報を考えながら写真やイラストをそれぞれの利点を発揮できるシーンに取り入れていきたいですね！
今回はあまり紹介できていないのですが写真や動画にも様々な利点があります。
撮影実績や、どんな風に撮影しているかなども紹介しているので、もし気になったら見てみてください！
▼写真撮影、動画制作実績
https://www.medical-design.co.jp/works/photo.html
▼ブログ：神戸まで動画撮影にいきました！
https://blog.medical-design.co.jp/archives/2630
▼ブログ：ドクターインタビューに行ってきました！
https://blog.medical-design.co.jp/archives/2598
▼サイト制作のご依頼、ご相談は下記ページのフォームからお気軽にお問い合わせください
https://www.medical-design.co.jp/contact/