お久しぶりです、デザイナーの田中です。
今月は、ほかのデザイナーさんがデザインをした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