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

サイトリニューアルの依頼を受けた際に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）においては閲覧者が現在使用している端末からログインしている状態でなければ投稿を表示することができないので、ターゲット層の年齢などによっては他の方法を検討する必要があるかもしれません。

Tweets by AEAZgqicUj8zwjI

 

この投稿をInstagramで見る

 

メディカルデザイン株式会社(@medicaldesign_213)がシェアした投稿

▼横須賀三浦動物病院センター（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サイトにあわせていろいろな提案をいたしますのでお気軽にご相談ください！

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

お久しぶりです、デザイナーの田中です。
今月は新規のサイト制作ではなく、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サイトを作ったあとの様々なバックアップもお任せください。
今年も残りわずかとなりましたが、引き続き気を引き締めていきたいと思います！

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

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

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

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

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

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

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

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

ワークショップ内容

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

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

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

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

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

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

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

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

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

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

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

システム部の渡辺です。

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

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

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

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

になります。

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

私個人の判断で、

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

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

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

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

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

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

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

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

システムの渋谷です。

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つを指定しておくと光が当たってるところの白とびが抑えられたり、暗すぎるところが明るくなります。

3. HemisphereLight（半球ライト）

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

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引数が地面からの反射の色になります。

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

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

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

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

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

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

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

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

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

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

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

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

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

制作実績

→グラフィックデザイン

→ロゴデザイン