SNSへの導線

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

サイトリニューアルの依頼を受けた際に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つのページにテキストリンクでまとめてしまいましょう!閲覧者にとってそのページを軸として、それぞれのSNSを見に行くことができるのはとても便利です。どのSNSなのかどんなアカウントなのかの情報がわかれば、自分の興味のある情報を選ぶことができるのもいいですね。

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

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

 

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

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

ご提案デザイン

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

ブログページのご提案

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

 

▼現状

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

▼ご提案内容

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

▼ご提案の狙い

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

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

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

 

▼デザイン

①TOPページ

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

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

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

 

 

➁ブログ記事ページ

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

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

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

 

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

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

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

③ブログ一覧ページ

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

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

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

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

▼現状

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

▼ご提案内容

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

▼ご提案の狙い

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

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

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

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

 

▼デザイン

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

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

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

最後に

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

 

イラストのあるデザイン

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

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

 

つけたしデザイン

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

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

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

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

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

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

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

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

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

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

 

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

 

 

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

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

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

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

 

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

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

 

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

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

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

 

▼写真の選定

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

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

 

 

▼表

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

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

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

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

 

▼作図

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

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

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

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

 

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

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

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

 

最後に色味です。

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

 

4.コーディング

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

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

 

5.修正

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

 

最後に

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

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

ワークショップに行ってきました!

はじめてのワークショップ

こんにちは! 前回の投稿から引きつづき、また呉が書かせていただきます。

 

今回は、御茶の水美術学院の大人向けアートスクール「artgym」のワークショップに行ってきました!

「デザインに役立つ!構図基礎-グラフィック篇-」というワークショップだったのですが、デザインの業務にまだまだつまづいてしまう私にはピッタリで、
ちょうどこういうのを学びたいと思っていたため、緊張しながらもワクワクしつつ当日を迎えました。

 

ワークショップに行くこと自体が初めてで、ましてやデザイン系ですから、
どういった人たちがいて、どういった雰囲気が進めるのだろうかと不安ではあったのですが、

行ってみれば講師の方もとても話しやすく気さくな方で、とても穏やかな雰囲気のワークショップでした。

ワークショップ内容

 

ワークショップの内容はというと、講義のようにただ講師の方のお話を聞くだけではなく、

実際に自分で構図を考えながらデザインを作ったり、また既存のチラシなどのデザインを分析するなど、
手を動かしたり見て学んだり退屈しないものでした。

真ん中にモチーフがくる日の丸構図や、縦横を3分割する3分割構図など、構図にはいくつかのパターンがあるというテクニック面も学べましたが、

今回のワークショップで一番に学んだことは、「構図とは”意図”を持って配置すること」でした。

 

既存のチラシを比較して、このデザインの制作者は何を意図してこういったデザインにしたのかと考えたとき、
例えば東京五輪のチラシならスポーツらしい疾走感を持たせたり、子ども向けの音楽会のチラシなら子どもの興味を引くようなデザインにしたりと、
どのデザインにもそのデザインになった「意図」があることに気づかされました。

 

当たり前のことのように聞こえますが、私にはちょうど心当たりのあることがありました。

というのも、つい先日、制作したバナーに対して「クリックできる感が少ない」という指摘を受けてしまうことがありました。

改めて作ったバナーをみると確かに、それはただの一枚のデザインであって、それがクリックできるものであると示す要素が少ないことに気づかされました。

学んだことを受けて考えてみれば、「クリックしてほしいという”意図”」がないままバナーを作ってしまっていたのです。

 

気をつけているつもりではあったのですが…デザインって難しいんだなあと改めて感じると同時に、
これを機に、次からデザインを作るときはちゃんとそういった意図を意識して作ろうと思います。

 

思った以上に実りのあるワークショップだったので、また機会があれば行きたいですね!
それでは!

ウェブアクセシビリティのJIS規格対応2

システム部の渡辺です。

前回記事「
ウェブアクセシビリティのJIS規格対応」の続きで、

具体的な作業に関する部分を書きたいと思います。

アクセシビリティのJIS規格「JIS X 8341-3」の詳細がわかる公開されているページは現在、

公式ページ「実装チェックリストの例 2012年11月版」

になります。

38項目のリンク先ページに約10個ぐらいの対応内容が書かれていますので相当な量になりますが、基本的に常識的なWEB制作をしていれば大抵のものはクリアできるかと思います。

私個人の判断で、

「あまり一般的ではない内容」

「登場頻度が多く、うっかり忘れてしまいそうな内容」

「デザイン時」「コーディング、特にベース部分制作時」「コーディング、特に各ページの制作時」に分けてピックアップすると下記の表のようになりました。

もし参考になりましたら幸いです。

  • ※ 上記は動画に関する項目は省いています。サイト内に動画を設置する場合は気をつける点が増えます
  • ※ 「達成基準」の部分を、公式ページへのリンクにしています。

デザイン時に気をつける項目

番号 達成基準 状況 項目の内容 説明 追記 等級
7.1.3.3 感覚的な特徴に関する達成基準 理解すべき情報を感覚的にだけ伝えることのないように、テキストでも情報を伝える 「フォームを送信するには、次へと記された円形のボタンを押して下さい」など操作方法を説明するようなシーンで、その「ボタン」の説明には、形や大きさ又は相対的な位置についての情報がない場合でも、アイテムを見つけて特定するための追加情報を含めましょう。 A
7.1.4.1 色の使用に関する達成基準 状況 A: 特定の語句、背景、又は他のコンテンツの色を用いて情報を示している場合 色の違いで伝えている情報をテキストでも入手可能にする 色によって伝えられている情報は、テキストでも説明するようにしましょう。 A
7.1.4.1 色の使用に関する達成基準 状況 A: 特定の語句、背景、又は他のコンテンツの色を用いて情報を示している場合: テキストの色の違いで情報を伝える際は、視覚的な手がかりを補足する A
7.1.4.1 色の使用に関する達成基準 状況 A: 特定の語句、背景、又は他のコンテンツの色を用いて情報を示している場合: リンク又はコントロールを色だけで識別している箇所の視覚的な手がかりを補足するために、周囲にあるテキストとのコントラスト比を 3:1 以上にする A
7.1.4.1 色の使用に関する達成基準 状況 B: 情報を伝える画像の中で色を用いている場合: 色とパターンを併用する 色を用いて伝達されている情報の全てに、色に依存しないパターンも併用しましょう。 A
7.1.4.1 色の使用に関する達成基準 状況 B: 情報を伝える画像の中で色を用いている場合: 色の違いで伝えている情報をテキストでも入手可能にする 画像の中であっても、色によって伝えられている情報は、テキストでも説明するようにしましょう。 A
7.1.4.3 最低限のコントラストに関する達成基準 状況 A: 太字でないテキストが18ポイント(日本語は22ポイント)未満、太字のテキストが14ポイント(日本語は18ポイント)未満の場合: テキスト(及び画像化された文字)とその背景の間に、少なくとも4.5:1のコントラスト比をもたせる 小さい文字は、コントラスト 4:5:1 もたせましょう

ロゴか装飾的なテキストは例外
AA
7.1.4.3 最低限のコントラストに関する達成基準 状況 B: 太字でないテキストが少なくとも18ポイント(日本語は22ポイント)、太字のテキストが少なくとも14ポイント(日本語は18ポイント)の場合: テキスト(及び画像化された文字)とその背景の間に、少なくとも3:1のコントラスト比をもたせる 文字が大きいならコントラストは 3:1 もたせましょう AA
7.2.4.6 見出し及びラベルに関する達成基準 目的や内容が分かるラベルを提供する サイト内で、入力を受け付ける input 属性には適切なラベルを表示しましょう AA

コーディング、特にベース部分制作時に気をつける項目

番号 達成基準 状況 項目の内容 説明追記 等級
7.1.1.1 非テキストコンテンツに関する達成基準 状況F:

非テキストコンテンツを支援技術が無視するようにしなければならない場合:
CSSで指定する画像は、装飾的なものだけである 意味のあるテキストやアイコンを、CSS だけで表示してしまうと、CSSを無効にした場合に表示されないので避けましょう。 A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
CSSを用いて構造と表現を分離する ブラウザの CSSをオフにして、情報が伝わることを確認しましょう A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
h1要素~h6要素を用いて、見出しを特定する A
7.2.1.1 キーボード操作に関する達成基準 JavaScriptでイベントハンドラを用いる場合は、キーボードで操作できるようにする

ただし、軌跡に依存した入力を要する機能(お絵描きプログラム等)は除く
キーボードだけで操作して、すべて操作可能であることを確認しましょう。

例)

キーボードでリンクを選択できる。

キーボードでリンク移動ができる。

メニューなど mouseover で表示されるサブメニューがある場合は、focus イベントも追加して、キーボードで操作できるようにする。
A
7.2.1.2 フォーカス移動に関する達成基準 利用者がコンテンツ内に閉じ込められないようにする A
7.2.4.1 ブロックスキップに関する達成基準 以下のいずれかを用いて、繰り返されるブロックをスキップ可能にする

1) 以下のいずれかを用いて、繰り返されるブロックをスキップするリンクを作成する

a) メインコンテンツへ直接移動するリンクを各ページの先頭に追加する

b) 繰り返しているコンテンツのブロックの開始位置に、そのブロックの終了位置へのリンクを追加する

c) ページの先頭に、コンテンツの各エリアへのリンクを追加する

2) 以下のいずれかを用いて、スキップ可能な方法で繰り返されるブロックをグループ化する

a) コンテンツの各セクションの開始位置に見出し要素を提供する

b) 構造を示す要素を用いて、リンクをグループ化する

c) frame要素を用いて繰り返しているブロックをグループ化し、frame要素にはtitle属性を付与する

d) 展開可能及び折り畳み可能なメニューを用いてコンテンツのブロックをバイパスする
A
7.2.4.3 フォーカス順序に関する達成基準 TABキー又は矢印キーを用いて、フォーカスを受け取る要素を移動し、その順序が意味及び操作性を保持していることを確認する。 レスポンシブウェブデザイン時では特に注意した方がよさそうな点。 A
7.1.4.4 テキストのサイズ変更に関する達成基準 以下のいずれかの実装方法を用いて、コンテンツ又は機能を損なうことなく、テキストを支援技術なしで 200%までサイズ変更できるようにする(ただし、キャプション及び画像化された文字は除く)

ユーザーエージェントの機能を用いて拡大できるコンテンツを作成する

コンテンツを拡大するためのコントロールを提供する

コンテンツ又は機能を損なうことなく、テキストを支援技術なしで 200% までサイズ変更できることを確認する(ただし、キャプション及び画像化された文字は除く)。
忘れると後からの修正が大変な項目です。

文字を 200% 拡大して、隠れる文字がないかを確認する

ブラウザによっては文字だけではないズーム機能も用意されているが、この場合は「文字だけを200%に拡大」した際に、コンテンツの意味が失われないように気をつけましょう。

具体的な作業としては、文字を含む要素には高さを指定せずに、縦幅リキッドレイアウトを意識してコーディングします。
AA
7.1.4.5 画像化された文字に関する達成基準 例外に該当しない文字は、画像化しない

いずれかを満たす場合は例外とする
画像化された文字が利用者の要求に応じて視覚的にカスタマイズできる

または

文字の特定の表現が、伝えようとする情報にとって必要不可欠である(ロゴタイプを含む)

7.2.4.6 見出し及びラベルに関する達成基準 内容が分かる見出しをつける

(見出しがある場合は、その内容が適切かを確認する。)
AA
7.2.4.7 視覚的に認識可能なフォーカスに関する達成基準 すべてのコントロールでフォーカスインジケータが視覚的に認識可能にする

キーボードのtabキーを押下し、フォーカスインジケータを移動させた場合に、すべてのコントロールにおいてフォーカスインジケータが視覚的に認識できるか、または、認識できるようにキーボードで変更する機能を有することを確認する。
AA
7.3.2.3 一貫したナビゲーションに関する達成基準 繰り返されるコンポーネントが表示されるたびに、それを相対的に同じ順序で提示する ウェブページの集合(例えばウェブサイト)にて繰り返し利用されるコンポーネント(例えば、ロゴ、タイトル、検索フォーム、ナビゲーションバー、ナビゲーションメニュー等)が、相対的に同じ順序で表示されていることを以下の方法などを用いて確認する。

  • CMS等により、繰り返し利用されるコンポーネントが相対的に同じ順序で提示されるように管理されている
  • 各ページを作成する際にテンプレートを利用したり、Webページ製作・編集ツールの機能を用いることなどにより、繰り返し利用されるコンポーネントが相対的に同じ順序で提示されるように管理されている
  • CMS、テンプレート等で管理されていない場合は、試験実施ガイドライン2.3節のb)c)に示された選択方法などを用いて試験対象ページを選択し、該当ページ間で繰り返し利用されているコンポーネントが相対的に同じ順序で表示されている
AA

コーディング、特に各ページの制作時に気をつける項目

番号 達成基準 状況 項目の内容 説明 追記 等級
7.1.1.1 非テキストコンテンツに関する達成基準 状況A:

短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合:
img要素にalt属性がある imgタグに alt属性をいれましょう。

alt属性が不要な場合は alt=”” と属性値なしで書きます。
A
7.1.1.1 非テキストコンテンツに関する達成基準 状況A:

短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合:
隣り合う画像とテキストのリンクが同一のhref属性値を持つ場合、画像とテキストを1つのa要素でマークアップする 例えば、キャプチャ画像と説明テキストが同じリンクで隣あっているような時は、1つの同じ a要素にいれましょう A
7.1.1.1 非テキストコンテンツに関する達成基準 状況A:

短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合:
a要素のリンクの目的を説明するリンクテキストを提供する 音声読み上げされる a要素に含むテキストの意味に気をつけましょう。 A
7.1.1.1 非テキストコンテンツに関する達成基準 状況A:

短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合:
画像のグループにある一つの画像に代替テキストを提供して、そのグループのすべての画像を説明する 画像が連続していて連続で alt属性読み上げが無駄そうな時はむしろいれない方がいい。例えば「★☆☆」というような画像など A
7.1.1.1 非テキストコンテンツに関する達成基準 状況B:

短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できない場合(例:チャート又はダイアグラム):
以下のいずれかの方法を用いて長い説明を提供する

  • 短い説明の中で長い説明の場所を示す
  • 非テキストコンテンツのすぐ隣に長い説明へのリンクを提供する
  • object 要素のボディに代替テキストを記述する
A
7.1.1.1 非テキストコンテンツに関する達成基準 状況F:

非テキストコンテンツを支援技術が無視するようにしなければならない場合:
支援技術が無視すべき画像の img 要素は、alt属性値を空にして、title 属性を付与しない 音声読み上げで伝える意味のあるテキストであり、不要な場合は alt=”” と属性値なしで書きましょう。 A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
セマンティックなマークアップを用いて、強調したテキスト又は特別なテキストを示す 太字で強調するテキストには、 em か strong を使いましょう。など。 A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
引用箇所がある場合、blockquote要素でセマンティックにマークアップする A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
引用箇所に参照情報がある場合、参照先を cite 要素でセマンティックにマークアップする A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
下付き文字、上付き文字がある場合、それらを sub、sup要素でセマンティックにマークアップする A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
色の手がかりを用いる場合には、セマンティックにマークアップする

色で情報を伝えている場合、セマンティックなマークアップ(例えば、em、strongなど)を用いていることを確認する。
A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
table 要素の summary 属性を用いて、データテーブルの概要を提供する html5 では summary を書いてしまうと、valid ではなくなってしまいますので、html5 でマークアップしている際はつける必要はないと思われます。 A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
見出し構造が複雑で、scope属性だけでは見出しセルが指定できないデータテーブルでは、id 属性及び headers 属性を用いて、データテーブルのデータセルを見出しセルと関連付ける A
7.1.3.1 情報及び関係性に関する達成基準 状況 A:

ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:
リストに、ol 要素、ul 要素、dl 要素を用いる

リストのマークアップを用いて、リストの情報を提示する
7.1.3.2 意味のある順序に関する達成基準 単語の文字間にスペースやタグを用いない A
7.2.4.2 ページタイトルに関する達成基準 title要素を用いて、コンテンツの内容が分かるページタイトルを提供する A
7.2.4.4 文脈におけるリンクの目的に関する達成基準 以下のいずれかを用いて、リンクの目的を特定する

  • 1) a) b)を用いてリンクの目的を説明したリンクのラベルを提供する
    • a 要素のリンクの目的を説明するテキストリンクを提供する
    • b) イメージマップの area 要素に代替テキストを提供する
  • 2) リンクのラベルとそれが含まれている文章中のテキストとを組み合わせる
  • 3) リンクのラベルとそれが含まれているリスト項目とを組み合わせる
  • 4) リンクのラベルとそれが含まれている段落とを組み合わせる
  • 5) リンクのラベルとそれが含まれているデータセル及び関連づけられた見出しセルとを組み合わせる
  • 6) リンクのラベルとその直前にある見出し要素とを組み合わせる
  • 7) 入れ子になったリスト項目にあるリンクのラベルとその親のリスト項目とを組み合わせる
  • 8) CSSを用いて、リンクの目的の説明を補足したリンクテキストの一部を非表示にする
A
7.4.1.1 構文解析に関する達成基準 ページをバリデートし、問題がないことを確認する。

ページがバリッドでない場合、少なくとも下記のいずれかを満たすこと

  1. 開始タグ及び終了タグが仕様に準じており、属性値のクオーテーションが正しく組になっていること
  2. ページがwell-formedであること
A

プログラマのためのthree.jsでの絵作り

03

システムの渋谷です。

three.jsでのモデル描画ができないままだと何か負けた気分だったので、モデル描画サンプルを用意しました。
方言に苦しめられるFBXとかではなく、json形式でデータを書き出したので今回は描画の乱れ等は起きずに済みました。

サンプルはこちら

ステレオカメラが標準で実装されていたので、裸眼立体視にしてみましたが、標準だと画角が小さいせいか効果が弱すぎたのでソース弄って効果を10倍にしています。

サンプルを用意する中で、レンダリング画像が簡単にきれいになるいくつかの抑えておきたい項目を紹介しておきたいと思います。

1.  アンチエイリアス設定

var renderer = new THREE.WebGLRenderer({antialias: true});

レンダラーを初期化するときにantialias: trueを指定しておくと汚いジャギーが消えてくれます。
three.jsのソースを見た限り特に処理の内容が書いていなかったのでブラウザに処理が依存していると思われます。
標準のandroidブラウザでは反映されていませんでした。

2. premultiplied gamma

renderer.gammaInput = true;
renderer.gammaOutput = true;

この2つを指定しておくと光が当たってるところの白とびが抑えられたり、暗すぎるところが明るくなります。

a02

3. HemisphereLight(半球ライト)

lighting

表示したいモデルに当てる光について、屋外を考えた場合

  1. 太陽光
  2. 青空からの環境光
  3. 地面にあたった太陽光の反射

がざっくりあるので、これを用意していきます。

 var directionalLight = new THREE.DirectionalLight(0xfff1d7,0.80);
 directionalLight.position.set(-6, 11, 10);

太陽光は通常の平行光源を使っています。
青空からの青い光と合わせて白になるように若干黄色がかった白を指定しておくといい感じになります。

環境光と地面からの反射は通常はアンビエントライトで我慢するのですが、three.jsではHemisphereLightが用意されているのでこれを使います。

 var hemisphereLight = new THREE.HemisphereLight( 0xd7fbff, 0x7e94a8, 0.7 );
 scene.add( hemisphereLight );

HemisphereLightの第1引数が空の色で、第2引数が地面からの反射の色になります。

反射の色は空の色に合わせたものか、明度を抑えておくと自然な感じに落ち着きます。

a03

というわけである程度見られるレベルにはなったと思うのですが、いかがでしょうか…?

3Dで見せたい商品がある等の場合、写真から3Dモデルが作れる123D Catchmementoなどを組み合わせれば、そう難しくなく実現できそうですよね。

【制作事例】サイトのスマホ対応

東京西徳洲会病院様の看護部サイトがスマホ対応になりました!

【東京西徳洲会病院 看護部サイト】
http://www.tokyonishi-nurse.jp/

スクリーンショット 2016-01-21 14.37.13

ウェブフォントを使用して各デバイスから見やすいデザインに

元々は画像になっていた見出し部分をウェブフォントに置き換えることにより、
スマホからでも見やすいレイアウトになりました。
▼「最新鋭の医療機器を導入し〜」の部分がウェブフォント。
サイトの雰囲気に合うように、丸みのあるフォントを使用しています。

スクリーンショット 2016-01-21 14.37.28

ウェブフォントとは

通常ならCSSでフォント名を指定しますが、閲覧者の環境にそのフォントがインストールされていなければデフォルトフォントで表示されてしまいます。
そこで便利なのが、CSS3から使用できるようになったウェブフォントです。ウェブフォントは、ブラウザがフォントファイルをダウンロードして表示してくれるので、閲覧者の環境を問わずに好きなフォントを使用することができます。

今まで、フォントのデザインを気にして画像にしていた見出しやボタンも、デザイン性を保ったままhtmlにテキストとして記述できるため、何度も画像を作り直す必要がなくなり、制作工程を大幅に短縮することができます。

弊社ではFONTPLUS(フォントプラス)というサービスを利用して、日本語ウェブフォントを使用しています。
→FONTPLUS http://webfont.fontplus.jp

ウェブフォントを使用したサイト例

→茅ヶ崎徳洲会病院様 http://www.chigasakitokushukai.jp/

スクリーンショット 2016-01-21 15.10.27

→太田記念病院様 http://www.ota-hosp.or.jp/

スクリーンショット 2016-01-21 15.10.44

→寒川病院様 http://www.samukawabyouin.com/

スクリーンショット 2016-01-21 15.10.12

【制作事例】紀尾井町内科様 グラフィックデザイン

12月1日に、紀尾井町内科様の開院にあわせてホームページが公開されました。
今回は、弊社で制作させていただいた印刷物をご紹介いたします。

【紀尾井町内科様】
http://kioichonaika.jp/
web_img_kioicho

制作させていただいたものは、
・封筒2種
・折り込みチラシ
・3つ折りリーフレット
・名刺
・診察券
・病院カード
・名札
です!

gra_img_kioicho

和を基調とした美しい院内の雰囲気に合うように、紙質やフォントにもこだわりました。

3つ折りリーフレットには、生成りで温かみのある和紙のような紙を使用しています。
印刷物に使われている写真も、すべて弊社で撮影いたしました。

DSC_2782

左から、名刺、病院カード、診察券。
診察券はプラスチックカードになっています。

DSC_2719

このように、WEBサイトの制作と並行してグラフィックデザインもお引き受けできます。
また、チラシの折り込みやポスティングに関してのご相談も承っております。
ポスターやお薬袋やカルテなどのデザインも可能です!

グラフィックデザインでお悩みでしたら、是非一度お気軽にご相談くださいませ。

市村先生よりコメントをいただきました

すべて安心してお任せすることができました。デザインに関して信頼していたのでノーストレスでした。
ありがとうございます。

制作実績

→グラフィックデザイン

→ロゴデザイン