SNSへの導線

Posted on by

お久しぶりです、デザイナーの田中です。

サイトリニューアルの依頼を受けた際にInstagramやYouTubeのチャンネルを開設したからサイト内で紹介できるようにしたい、といった要望を頂くことがあります。
今回はSNSを運用することのメリットや、SNS への導線設置方法には田中が担当させていただいた分だけでもいろいろ種類があったのでいくつか紹介したいと思います！

SNS運用のメリット

WebサイトにSNSへの導線設置をすることについて触れる前に、お客様自身がSNSを運用すること自体のメリットを少し紹介させていただきます。

 

1.開設費用がかからない

ホームページなどとは違い開設や運用には基本的に費用はかからない、または安価であることが多いです。利用者にとって始めやすく続けやすいということはSNSの大きな利点といえると思います。

 

2.手軽に情報発信ができる

仕事以外でも普段から利用している方も多いでしょうし、手軽に情報発信ができていいですよね。リアルタイムで常に最新の情報を投稿ができます。
これは私が転職時に企業が運用しているSNSやブログを見ていて思ったことなのですが、SNSやブログはリアルタイムの投稿だからこそどんな人たちがいるのか、実際に普段からどんな活動をしているかを知ることができたので積極的に見ていました。
多くのSNSでは文字数制限がある関係上、要約の仕方によっては投稿者の意図しない伝わり方をしてしまう可能性もあるので、手軽に投稿できるとはいえや投稿前に投稿内容の確認はしっかりしていきたいです。投稿前にダブルチェックを行う、プライベート用の端末からは投稿しないようにするという規則をつくるなどをして対策を行っていきましょう。

 

3.ホームページ訪問率の増加
病院に限らずですが「SNSでみてきた」という方はとても多いです。各SNSのプロフィールにホームページへのリンクを乗せることで、ホームページの存在を知るきっかけが増えるため訪問率増加が見込めます。
ホームページを作成していたとして検索上位にするというSEOの効果が出るまでには時間がかかるので、SNSを活用して窓口を増やしていきたいです。

SNSへの導線設置方法

1.単一投稿、投稿一覧（タイムライン）、動画の埋め込み

X（旧Twitter）、Instagram、Facebook など
埋め込みコードを利用して普段各SNSで見ているような投稿をそのままの見た目で表示します。もちろんwebサイトから「いいね」などもおせますよ。
訪れる閲覧者にとっては普段使用しているSNSであれば、見た目がいつもと同じなのでどこにどんな情報があるかなどわかりやすいというのはメリットですよね！加えてSNSと連動しているので、難しい操作をすることなくお客様のほうでいつも通り投稿していただければwebサイトのほうにもすぐ反映されます。加えてwebサイト上で閲覧することができるので、訪問者の直帰率を下げることが期待されます。
デメリットとしては、埋め込まれた際の見た目は各SNS依存のものとなるので場合によっては現在のwebサイトデザインから浮いてしまう可能性もあることです。
他にもX（旧Twitter）においては閲覧者が現在使用している端末からログインしている状態でなければ投稿を表示することができないので、ターゲット層の年齢などによっては他の方法を検討する必要があるかもしれません。

▼横須賀三浦動物病院センター（Facebook埋め込み）

https://www.kawabata-vet.jp/

▼コマツ栃木株式会社（YouTube）

https://komatsu-tochigi.co.jp/

 

2.リンクボタン　アイコン

ページ上部や下部にSNSへのリンクアイコンボタンを設置しているサイトは多いですよね。各SNSの知名度が高くアイコンが知れわたっているからこそできること…！
企業の力もさることながら、デザイナーとしては記憶にのこるシンプルなアイコンデザイン憧れてしまいます。
メリットとしては、基本的には広い設置場所を必要としないのでサイトイメージを崩すことなく設置できることです。
主張が激しくないため、他の設置方法と併用して使うこともできます。せっかくのSNS沢山アピールしていきましょう！ヘッダーやフッターに設置すればどのページに訪れたとしても目にはいるのでもし運用しているSNSがあれば積極的に配置していきたいです。

▼東京都立墨東病院 墨東人材育成センターBHC　（中央配置）

https://bokutoh-career.jp/

▼日本鋼管病院・こうかんクリニック 総合採用サイト（サイドに追従）

https://recruit.koukankai.or.jp/

▼湘南藤沢徳洲会病院　研修医サイト（フッターに配置）

https://shonan-doctor.jp/

 

3.バナー

画像としての設置方法です。メリットとしてはSNS側のいろいろな影響を受けずに自由に設置できるということでしょうか。
埋め込み型ですと見た目はSNS側依存になりますし、アイコン設置型もイメージを崩すことなく設置できると紹介しましたが実際はロゴ自体の保護領域や色の指定、最小サイズなど結構ガチガチの規約があったりするので、サイトになじませるといった点ではデザイン面で一番柔軟に対応ができます。デメリットとしてはデザイナーの腕次第だとは思うのですが、見慣れた各SNSのタイムライン画面、アイコンじゃないからこそSNSへの導線だということがわかりにくいことがあるかもしれません。

▼サーカス動物病院

https://circus-ah.com/

 

4.リンクまとめページ

沢山のSNSを運用しているなら1つのページにテキストリンクでまとめてしまいましょう！閲覧者にとってそのページを軸として、それぞれのＳＮＳを見に行くことができるのはとても便利です。どのＳＮＳなのかどんなアカウントなのかの情報がわかれば、自分の興味のある情報を選ぶことができるのもいいですね。

▼一般財団法人 太田綜合病院

https://www.ohta-hp.or.jp/about/sns

 

今回はSNSについてメリットや、webサイトへの導線配置を少し紹介させていただきました。訪問者の傾向や、現在のwebサイトにあわせていろいろな提案をいたしますのでお気軽にご相談ください！

今年も一年頑張りたいと思います！

Posted in デザイン

ご提案デザイン

Posted on by

お久しぶりです、デザイナーの田中です。
今月は新規のサイト制作ではなく、webサイトの保守・運用をさせていただいているお客様に、弊社側からアクセス解析などをもとにご提案をしたデザインを担当させていただいたのでそちらについてご紹介したいと思います。

ブログページのご提案

研修医ブログへの導線をバナーとして設置している病院採用サイトのTOPページ、ブログページ改修ご提案デザインを制作させていただきました。

 

▼現状

TOPページに設置しているバナーから飛べる研修医のブログページあり

▼ご提案内容

TOPページにバナーではなく、数件新着情報としてタイトルを表示し各記事に飛べるようにする
ブログページを他下層ページとは違ったデザインにする

▼ご提案の狙い

今回の狙いはブログページへの導線ボタンクリック率を上げることです。

弊社で運用・保守担当をしている他病院でも、従業員が投稿するブログ記事を掲載しているｗｅｂサイトがいくつかあります。その中でブログページへの導線がバナー設置タイプのｗｅｂサイトよりも、お知らせのようにタイトルや内容をＴＯＰページに表示しているサイトのブログページへの導線ボタンクリック率が高い傾向にあったため、サイトに訪れた就職希望者のブログページへの遷移率を上げるために、タイトル表示タイプへのレイアウト変更のご提案させていただきました。

研修医がどんなことをしているか知ることのできるブログ記事は就職希望者にとって入社後の自分を想像する材料の1つになります。私自身も転職活動の際には社員の投稿しているブログやＳＮＳを見てこんなことをやっているんだなと参考にしていました。
投稿頻度もたかく、ほとんどの記事でPDFでの図解も行っておりわかりやすいブログなのでしっかりブログページの存在をアピールしていきたいですよね！

 

▼デザイン

①TOPページ

すでにおしらせを表示していたので、そのおとなりに同じようなデザインでブログページへの導線を作りました。カテゴリーも表示するようにして、少ない情報量でもざっくりとした記事内容がTOPページからでもわかるようにしています。

また小さくアイコンを表示していたYouTubeとX(旧Twitter)リンクボタンも、アカウント名なども表示した大きめのボタンに変更しました。

やはりクリックした先にどんな内容があるかすぐわかるというのは利用者からすると助かる表示ですよね。

 

 

➁ブログ記事ページ

サイト全体のデザインとしてメインカラーに紺色、サブカラーにマゼンタ、図形の角は鋭角、病院らしい信頼感やリアリティを感じさせるデザインになっています。

ただそういったデザインは誠実な、信頼感のあるといった印象を伝える一方で親しみやすさからはすこし離れたデザインになっているため、就職希望者に親しみやすさを感じていただけるような、研修医のフレッシュさを感じていただけるようなデザインに若干変更をしました。

メインカラーに青、サブカラーにピンク、もう一色が必要になった際にはロゴと同系色であるみどりを使うようにし、鋭角だった図形の角を若干まるめました。

 

パステルカラーではない色を使用することで青が連想させる誠実さなどの印象を保ったまま、やや柔らかい印象になるようにしています。

サイドメニューには新たに記事検索、最新の記事、カテゴリーを追加し、既存の月別アーカイブは年選択だけでなく月まで選択可能にすることで閲覧者が知りたい情報にたどり着きやすいようにしました。

また、前、次の投稿へボタンを記事上部と下部に設置することで同カテゴリーのほか記事への誘導も行えるようにデザインをしました

③ブログ一覧ページ

年別アーカイブを選択すると、該当する記事が縦長にすべて表示されるようになっていたので、各記事のアイキャッチとタイトル、カテゴリーを表示し1ページに10件ずつ表示するように変更しました。

長いスクロールによる閲覧者の離脱を防ぐため記事内容がわかる最低限の情報を一度に多く見せられるようにしています。

現在の空き情報掲載のご提案

福利厚生として、従業員が利用できる24時間対応の保育所施設を併設している、病院看護部採用サイトのTOPページ改修ご提案デザインを制作させていただきました。

▼現状

保育所施設は定員あり
現在の空き情報確認方法は電話での確認のみ（webサイトの掲載なし）

▼ご提案内容

TOPページに保育所施設の現在の空き情報を掲載

▼ご提案の狙い

「従業員は24時間対応の保育所施設を利用することができる」という福利厚生は病院のアピールポイントでもありましたが、webサイトとしてはそのような福利厚生があるという情報にたどり着くまでに2クリックが必要で情報へのアクセスがいいとは言えない現状でした。

また保育所施設には定員があるのですが、現在の空き情報については電話での確認が必要でした。

今回のご提案の狙いとしては、TOPページに空き情報についての情報を設置することで採用サイトを見にきた就職希望者が今まで情報を知るには2クリック必要だった保育所施設の存在を知ってもらいやすくすること、加えて就職した際にお子様を預けることができるのかおおよその空き状況を確認しやすくすることです。

病院のいいところなのでしっかりアピールしていきたいですよね！

 

▼デザイン

サイトを開いたらすぐに目につくメインビジュアル下に保育施設の現在の空き情報を設置しました。載せる情報は本日の日付と空きあり、残り僅か、空きなしの3段階で表示する現在の状況情報です。

就職希望者への周知も含めているのでアピールポイントである「24時間対応　保育所施設」というタイトルも大きめに入れています。

メインカラーはピンク、三角形のあしらいを多く取り入れているサイトなので今回設置する情報についても雰囲気を踏襲してデザインをしました。

最後に

弊社は日々のメンテナンスだけではなく、培ってきたノウハウやアクセス解析結果等をもとに、改善のご提案もさせていただいております。Webサイトを作ったあとの様々なバックアップもお任せください。
今年も残りわずかとなりましたが、引き続き気を引き締めていきたいと思います！

 

Posted in デザイン

イラストのあるデザイン

Posted on by

お久しぶりです、デザイナーの田中です。

今月も担当したウェブページのデザインについて紹介したいと思います。デザインの過程でイラスト制作にも携わらせていただいたので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/

 

Posted in デザイン

つけたしデザイン

Posted on by

お久しぶりです、デザイナーの田中です。
今月は、ほかのデザイナーさんがデザインをしたwebページやチラシをもとに別のデザインをするといったお仕事を何点か担当させていただいたので紹介したいと思います

サイトリニューアルで新規フロアマップ作成

以前弊社で作った動物病院様のホームページをリニューアルするということで新規でフロアマップの作製をさせていただきました。
すでに誰かが簡易的なマップに起こしてくれたものにアレンジを加えるマップ作製はしたことはありましたが、業者さんがみるような設計図からマップを起こしたのは初めてでした。知らない略語や単位が沢山です（笑）

このお仕事をしていると依頼されたものを調べる機会が多いので、いろいろな方面の知識が増えていくな～と感じるこの頃です。新しく得た知識はどこかで役立てていきたいですね！

既存チラシからLP(ランディングページ)作成

お客様がすでに作成しているチラシからLP(ランディングページ)のデザインをさせていただきました。メインカラーはそのまま使わせていただいて、フォントは似た印象のwebフォントに置き換え、フォントカラーもページ全体になじむ色にかえてといった感じに進めていきます。

 

チラシと違うところ①　改行

チラシの時は決定したデザインは変わらないため文章がバランスよく収まっていますが、横幅が可変するwebサイトではずっとそのバランスを保ってくれるわけではないので、紙とのギャップが大きくならないように意識しながら改行位置やテキストの横幅などは調整をしました。

 

チラシと違うところ➁　アプリへの誘導の位置

チラシの時はアプリへの誘導はQRコードのスペースをチラシ上部に一か所確保していました。縦長のwebページだとスクロールが発生するので上部だけに誘導ボタンを設置するとコンテンツを見るために一度下までスクロールしてからアプリの誘導ボタンを押すためにまた上へといった手間がユーザーに生まれてしまいます。そういった手間をなくしタイトル→各コンテンツ→誘導ボタンという自然な流れでユーザーがページを見ることができるようページ下部にもアプリ誘導のボタンを設置しているのが紙面デザインとの違いです。

 

紙と違うところ③　動き

Webならではの動きを付けたいとのことだったので作成していただいているイラストのパーツ分けもさせていただいています。コーダーさんがページ全体の動きに加えてそのイラストも動かしてくれました！

お客様の作成したチラシや私の手元では静止画だったイラストが、webページになって動いているのを見ると毎回感動しちゃいますね。コーダーさんすごいです。

既存サイトからチラシ作成

チラシからLPとは反対に先輩デザイナーがデザインしたホームページからチラシの作成をさせていただきました。

Webページももちろんインデントをそろえるときれいに見えるのですが、webページはレスポンシブで横幅が変化して端に来る文字や行数はその時その時で変わるので、見た目がいっさいかわらないチラシデザインは別の緊張感があります。

 

紙ならではのこだわり①　文字詰め

Webサイトでは文字単位の細かい設定まではできないことが多いので1文字1文字こだわることができるのが紙ならではですよね。

中でも日時や順序などで登場頻度の多い数字は、数字ごとに横幅が違ったり文字の形的に左右の空白部分が偏っていたりするためぱっと見均等になっているように見せるために調整をしました。

フォントによってはもとから詰めて調整してくれていたりするので同じ設定を再度使う際には都度確認が必要です。

数字と同じでアルファベットも漢字やひらがななどの日本語と比べてデフォルトの間隔が違うのでこちらも調整しています。1とかは特に他の数字と比べて余白が目立つので目を光らせていますよ ^^

デザイン済リニューアルサイトの作図

こちらも先輩デザイナーがトップページやサンプルページなどをすでにデザインしてくださっているサイトの作図を何点か担当させていただきました。リニューアル前に使用されていた図を新デザインのテイストに合わせて新しく作成する作業です。

リニューアル前は1つの画像だったものも、画像内に配置する文章量によってはスマホで閲覧した際に小さすぎて見えないということがないように、PC用、スマホ用の2種類作成しています。

やはりリニューアルの際はスマホで閲覧する方が多くなってきため、PCだけでなくスマホでページを見たときの見栄えももっとよくしたいといったお客様のご希望は多いです。

そういったご期待に沿えるように、特にフォントサイズを意識しながら作成しました。

既存サイトに新規ページのデザイン

すでに公開されている病院サイトに新しく追加する新規ページのデザインをさせていただきました。

お子様も閲覧することを前提としたページとのことだったのでサイト全体のきっちりとした雰囲気のデザインとは少し異なる「かわいらしさ、やわらかい」を意識してデザインをしています。

フォントを丸みのあるものに変更し、色合いをパステルカラーに変更しましたがサイト全体の統一感はなくならないよう色の系統はそろえました。

 

最後に

今月は誰かがすでにメインのデザインをしているものにたいし、プラスのデザイン…といった作業に多く携わらせていただきました。

自分で1から担当する際は、これはこんなイメージでどんな印象を与えたいから色はこれ、あれはそれ…と作業をしていましたが付け足しデザインということだったのでいかにすでにあるデザインになじませるか、というのが課題でした。

もちろん1から作るときも力は入れていますが、つけたしデザインをさせていただくのは私のデザインで今あるデザインが壊れないように…という普段とは違ったプレッシャーを感じますね。

いろいろなデザインを見ることで学ぶことが沢山できた月でした。新しい知識を自分のデザインに落とし込めるように今後も取り組んでいきたいと思います。

 

弊社ではwebサイト制作のほかにもチラシの作成や、動画制作なども行っていますのでぜひお気軽にご相談ください！

▼webサイト

https://www.medical-design.co.jp/works/web.html

▼グラフィック

https://www.medical-design.co.jp/works/graphic.html

▼写真撮影・動画

https://www.medical-design.co.jp/works/photo.html

Posted in デザイン, 未分類

製薬会社コーポレートサイトデザインのながれ

Posted on by

はじめまして、デザイナーの田中です。

今回は、製薬会社のコーポレートサイトの制作にデザイナーとして携わらせていただいたのでそちらの主にデザイン部分の制作の流れやそれぞれの工程で意識していたことについて紹介させていただきたいと思います。

1.トップページのデザイン

まずお客様への提案としてサイトの顔となるトップページを、リニューアル前のサイトやお客様、ディレクターさんの指示をもとにデザインをしていきます。

今回は社内の別のデザイナーと合わせて2案提案させていただきました。

デザイナー同士で方向性がかぶりすぎないようにベンチマークを最初に決め、そのあとから着手していくという流れで進めていきます。

トップページは、デザインをしていくうえでサイト全体のトーンマナーやフォント、雰囲気などを決定する大切なページです。

また、訪れたユーザーの第一印象をきめる重要な役割があるので印象に残るよう、かつ使いやすいデザインにするため力をいれてデザインを行いました。

 

今回はリニューアル前の明るめのメインカラーやキャッチコピーを踏襲しつつ、サブカラーはメリハリをつけるためにメインカラーと対極的な色合いのしっかり暗めの色にし、図形などはキャッチコピーに合わせて固すぎる印象にならないように角を丸め曲線の多いデザインにしました。

 

 

2.サンプルページのデザイン

トップページのデザインが決定した後は、サンプルページのデザインを行っていきます。

サンプルページはお客様に選んでいただいたトップページ決定案のデザインに合わせ、下層ページの見出しや、ボタン、表など汎用性のある基礎パーツを詰め合わせたページです。

このサンプルページをもとにコーダーさんにいろいろなページのコーディングをお願いすることになります。

 

サンプルページのデザインで作られたパーツは、サイト内の複数のページに配置されるのでユーザーが1番目にするパーツになる場合もあります。

そのため、操作がしやすい、わかりやすいを意識しながら作業をしました。

 

3.作図やページごとの詳細デザイン

サンプルページが決定したら次は汎用性のあるパーツだけでは作成できない、細かいページごとのデザインを行っていきます。

今回のコーポレートサイト制作ではおもにページごとの写真の選定、製品詳細についての表、作図の3つがこの工程にあたります。それぞれの作業では下記のようなことを意識して作業を行っていました。

 

▼写真の選定

写真を使うのは主に各ページのメインビジュアルにあたる部分であるため、写真選定において意識した点は、まず各タイトルが伝わる情景の写真を選ぶことです。

また、サイト全体を通して不自然に感じられないよう、色味や構図、明るさなどを調整しています。適切な写真を選ぶことでユーザーにとって見ていくうえでストレスのないページにしたいと思い写真周りのデザインを行いました。

 

 

▼表

表についてはサンプルページでも簡易的なものは作成しましたが、ここではより複雑な個々のページ専用の表を作成しました。

製品一覧についての表では列が多いので各列のタイトルは縦書きにしました。

かつ行も今後製品が増えるごとに増えていくことが想定されるので、目がちかちかしないようにサンプルページの表にあった行の上下にある線を取り払い、代わりに偶数行と奇数行で背景色をあまり目立たない色で色分けをし、視認性をよくしています。

製品詳細についての表では1行目だけでなく、中間にもたびたびタイトルが入る行が必要になるため、こちらも色の主張が激しくなりすぎないよう、サンプルページではメインカラーと同じく濃く明るい色の設定がしてあったタイトル行の背景色を落ち着いた色に設定し、表全体の線を細くすることで詰まった印象がないように変更しました。

 

▼作図

言葉だけでは伝わらない箇所に入れるための図を作成していきます。

画像として埋め込むことになる図自体は画面幅の変動に対応して改行や枠を縦長に…なんてことは基本的にはできないので必要に応じてPC(パソコン)対応の図とSP(スマホ)対応の図を作成していきます。

PC(パソコン)版だと図の中の流れは横長の画像であるため左→右なのに対し、SP(スマホ)版だと縦長の画像であるため図の中の流れが上→下に変化するので、どちらの図もZ型の視線誘導のレイアウトを意識することで縦横比の比率を変えても印象が大きく変わりすぎることないように調整をしました。

画像の縦横の比率を変えて中身を組み替えるという観点だとバナーのリサイズも似たような作業ではあるのですが、横長のものを縦長にという組み換えはバナーではあまりしないので少し新鮮な作業ですね。

 

上記の内容とかぶってしまうのですが画像として埋め込む図は横幅の変動に応じて改行などは行えないのでPC(パソコン)用とSP(スマホ)用の図を用意します。

ただ、その中間は画像を画面幅に応じて縮小しながら表示をすることになるため小さくなった時に、ユーザーが図の中のテキストが見えづらい…ということを回避できるようにフォントサイズを大きめにすることを意識していました。トップページを作る際に最小のフォントサイズなどは決めているので、そこから計算して図の中のフォントサイズを決定しています。

中にはコーダーさんがコーディング時に画像を切り分け、図の中のテキストもレスポンシブ対応してくれている図もあるので頭が上がりません…。

 

最後に色味です。

色味についてはサイト全体に合わせています。サイト自体よりも色の必要数は多くなるのでメインカラーとサブカラーに近い色と無彩色を使い作図をしています。

 

4.コーディング

コーダーさんにデザインデータをお渡しし、コーディングを行ってもらいます。

動きを付けていただいたり、デザインデータにはないタブレットサイズのビジュアルなども調整していただいたりと一気に完成に近づきます！

 

5.修正

お客様から、戻ってきた指示や要望をもとに修正や新規ページの作成をしました。

 

最後に

先輩デザイナーをはじめ、ディレクターさんやコーダーさんにアドバイスをいただきながらデザインを行いました。お客様目線やレスポンシブ的なところなどいろいろな観点からこうしたらいいのではないかという意見を気軽にいって頂ける環境は私だけでは気づけないところもあるのでとても助かりました。

終わりが近づいてきましたが公開までの期間、ブラッシュアップできるようにより力を入れていきたいと思います。

Posted in デザイン, 未分類