ウェブアクセシビリティの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サイトの制作と並行してグラフィックデザインもお引き受けできます。

また、チラシの折り込みやポスティングに関してのご相談も承っております。

ポスターやお薬袋やカルテなどのデザインも可能です!


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

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

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

制作実績

→グラフィックデザイン

→ロゴデザイン

【制作事例】看護部サイト

茨城県にある筑波学園病院様の看護部サイトをリニューアル制作させていただきました。

「筑波学園病院 看護部」
http://nurse.gakuen-hospital.com/

tsukubakangobu01

 

こちらの病院では従業員満足度が非常に高く、
一度は出産のために退職されたナースさんが子育てを終えてまた戻ってこられることもあるのだとか。
子育て支援や教育システムなどハード面の充実ももちろんですが、
スタッフ同士で支えあいながら働けるという人間関係の良さがスタッフの満足度につながっているようです。

そんな働きやすさをもっと効果的にアピールしよう!ということで
各所に工夫を凝らしました。

 

まず注目していただきたいのが、トップページで素敵な笑顔を見せてくれているナースさんの写真。
こちらは実際に筑波学園病院様で働いているナースさんたちを撮影させていただきました。

リロードするたびに違うナースさんが出てきます。
その数は全部でなんと12種類!
下の写真はその中の一部です。(あとはぜひサイトで確認してみてください・笑)

tsukubakangobu02

トップページを表示するたびに色々な笑顔のナースさんが出てくるので、
それだけでグッと生き生きとした印象になりますよね。
実は、これだけの枚数が出てくるのにはもう一つ理由があります。

 

ナースさんに限った話ではないのですが、
サイトにスタッフさんの写真を使いたいと思っても、
スタッフさんからOKがいただけずにモデルさんや素材集を使用するということはけっこうあるんです。

今回は特にトップページという目立つ場所ですので、
やはりそういう場所に写真が載ってしまうのはちょっと……という声もあり、
最初はモデルさんを使って撮影するという案も出ていました。

モデルさんでも、工夫すれば自然な写真を撮ることは可能です。
ただ今回はアピールポイントに「人間関係の良さ」があるということもあり、
ナースさんが支えあって働いている雰囲気をダイレクトに伝えるには、
やはり実際のナースさんを撮影させていただきたかったんです。

 

なのでここはちょっと工夫しまして、
「写真は部署ごとに2名または3名ずつ、
ブラウザを更新するたび画像が変わるので自分だけがずっとトップページに表示されることはありません」
ということで、なんとかOKをいただきました。

素材集やモデルさんでは出せない、
あたたかみと表情のあるトップページになっていると思います。

 

ナースさんたちには看護部紹介動画にもご出演いただいています。

ナレーションもナースさんたちが実際に喋ってくれています。

2分弱という短い動画ですが、
ナースさんたちがイキイキと楽しく働いている雰囲気が伝わってきますね!

実際のスタッフさんを起用した撮影は、
全員の日程を合わせるのが大変だったり、
思うような表情がなかなか撮れなかったりと難しい面もあります。

ですが、病院の「表情」がダイレクトに伝わるという点で、
特にリクルートを目的とする場合には効果が高いと思います。

 

コンテンツにもたくさんナースさんの笑顔写真を使わせていただきました。
スマートフォンでの閲覧にも対応しています。

看護部の魅力が存分に伝わるサイトになっていると思いますので、
ぜひご覧になってくださいね。

 

「筑波学園病院 看護部」
http://nurse.gakuen-hospital.com/

【制作事例】動物病院サイト・外来担当表CMS

千葉県内に3つの動物病院を展開する、
スマイルどうぶつ病院さんのWebサイトをリニューアル制作させていただきました。

スマイルどうぶつ病院
http://smile-vet.jp
web_img_smile-vet

3院で異なる病院情報をわかりやすくまとめられるようにと考えてフッターをデザインしました。
Webサイトのカラーに合わせてGoogle Mapのカスタマイズも行っています。
web_img_smile-vet2

制作後は、メディカルデザインで更新のサポートをさせていただくことはもちろん、
ブログや外来担当表など、院内から簡単に更新可能なCMSの導入も行っています。

スマイルどうぶつ病院さんのサイトでは、ブログはWordpressを導入し
外来担当表はご要望に合わせてオリジナルのものを作成いたしました。
web_img_smile-vet3

オリジナルのCMSについては、外来担当表のほか、休診情報ページや医療講演ページなど、
ご希望に合わせて作成可能です。過去のブログでもご紹介しています!
>>>どんなCMSがあると便利?

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~カメラ紹介② Nikon D800~

こんにちは、デザイナのTです。

前回のNikon D750紹介に引き続き、今回はNikon D800についてご紹介したいと思います。

Nikon D800の特徴

img_00

D800は、3台の中で最も高い画素数を誇ります。その数なんと3630万画素

WEB用だけで使うにはもったいないくらいの細やかさです。

パンフレットやポスターにも使える写真を撮りたい!という時に非常に重宝しそうですね。

Nikon D800で撮ってみる

img_01

弊社のオフィス、朝の風景です。

晴れた日にはおおきな窓のカーテンから陽が差し込み、なかなか心地が良いです。

さて、奥に観葉植物が見えますが、お気づきでしょうか。

この観葉植物の上部の二股部分にあるモノが潜んでいるのです。

D750で撮った写真を拡大して見てみましょう。

img_02

…んん?

茶色いなにかであることは判別できそうですが、

なんだかボンヤリしてよく分かりませんね。

ではお次にD800で撮った写真。

img_03

ステゴサウルスちゃん(?)でした!はっきりしていて分かりやすい!

そう、D800の画素数があればここまで拡大してもはっきりしているのです。

WEB素材としても、撮影した写真の一部をトリミングして使用するといったことができそうです。

Nikon D800 まとめ

弊社では近頃はWEBだけでなく、病院用の告知ポスターやチラシなどの制作にも取り組んでいます。

印刷用の写真撮影に十分な画素数をもつNikon D800。

きめ細やかな写真を撮りたい時に重宝しそうですね。

次回は、Nikon D4sについてご紹介したいと思います。

【制作事例】HTML5によるアニメーションとゲーム

昨年11月にJAセレサ川崎様のHPリニューアルの制作をさせていただきました。
PC/スマートフォンに対応しています。

セレサアニメ

http://www.jaceresa.or.jp/
PC版のトップページのメインビジュアルは
川崎の臨海部〜都市〜里山を気球でめぐる楽しいアニメーションになっています。
ポイントは多重スクロールによる奥行き感と、それがきちんとループでつながっている点です。
気球も動かせます!

 

また、せっかくリニューアルするなら、利用者が楽しめるようなコンテンツを作りたい、というご要望があったので
同じイラストを利用して、オリジナルゲームの制作をご提案しました。

game02_ol
「旬の野菜をキャッチ!GO!GO!CERESA!」
http://www.jaceresa.or.jp/game/

飛んでくる野菜を時間内にできるだけ多くキャッチする!という単純なゲームですが、
季節によって高得点のアイテムが変わったり、ハイスコアランキングがあったりします。
スマホ版もあるので遊んでみてください。

 

何年か前だと、Flashで制作するところですが、
HTML/CANVAS/Javascriptでの制作となるとちょっと手間がかかります。
最近は逆に、ホームページ内でこういったコンテンツを見かける機会が減ったかもしれないですね。

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~カメラ紹介① Nikon D750~

こんにちは、デザイナのTです。

年が明けて早くも1ヶ月が経ってしまいました。

遅ればせながら、今年もよろしくお願いいたします。

さて、弊社には現在3台のカメラがあります。

複数名で撮影行くことがあったり、同じ日に別の撮影がカブっていたりするので

様々な条件によって使い分けているようです。

そこで、複数回にわたり、これらのカメラを簡単にご紹介していきたいと思います。

ちなみにご紹介するカメラのラインナップはこちら。

  • Nikon D750
  • Nikon D800
  • Nikon D4s

今回は、Nikon D750についてのご紹介をします。

Nikon D750の特徴

img_00

こちらのD750は3台の中でも比較的扱いやすい万能なカメラで、

私のような初心者でも、「シャッター切っときゃなんとかなる(by 社長)」写真を撮ることができます。

D750はアタマの回転が良いので、オート設定でも周囲の状況をサッと認知して

うま~い具合に光量やバランスを調整してくれるんですね。なので初心者にも優しいのです。

img_01

そして注目すべきはこの可動式液晶モニター。

モニターを動かすことができるので、ファインダーを覗かなくとも俯瞰やあおりの写真を自由に撮ることができます。

img_02

こんなかんじで撮っています。

Nikon D750で撮ってみる

せっかくなので、この可動式液晶モニターを活かして俯瞰やあおりの写真を撮ってみたいと思います。

まずは俯瞰の写真から。

img_03

弊社オフィスの様子です。

ふみ台不要でこの目線!広角レンズとの相性もバツグンです。

そしてお次はあおりの写真。

img_04

題して「ルンバの目線」です。

そびえたつ空気清浄機が帰路を邪魔しているのでしょうか。

お陰でここ最近、ルンバが帰還前に力尽きている光景をよく目にします。

img_05

あともうすこし・・・

Nikon D750 まとめ

可動式液晶モニターによって、目線を変えた写真を簡単に撮ることができるNikon D750。

迫力のある写真を撮りたい時に重宝しそうですね。

次回は、Nikon D800についてご紹介したいと思います。

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~実際に撮影に行ってみました~

 

こんにちは。
本日まで空白ではなく濃密な2ヶ月を過ごしておりました、デザイナのTです。
 

さてそんな濃密な2ヶ月の間、なんと実際に撮影をさせていただく機会がありました。
 

デザインにも携わっている身なので、
頭にはぼんやりと「こんな構図の画がほしいなぁ」とか
「あんな自然感のある画入れたいなぁ」というものがあり、
その素材を自分で撮りに行く、というわけです。
 

「なんとなく欲しい画は把握してるし、なんとかなるでしょう」
なんて甘い考えが吹き飛ぶほどに始終軽いパニック状態だった人生初の撮影。
撮影したデータを見て、「アレ?こんな仕上がり…?」といった具合になってしまいました。
当初頭に思い描いていた「こんな構図」や「あんな自然感」はドコへ…
 

ですがかなり多くの教訓を得ることができ、非常にためにる経験となりました。
そこで今回は、撮影を通して初心者なりに気づいた点をまとめてみました。
 

1. 迷ってる暇はない!慣れないうちはある程度構図を決めて行く

 
img_00
 

基本、スタッフの方々のお忙しい時間を割いて撮影させていただくわけなので、
手際よくパッパと進めないとなりません。
また作業中の様子を撮る時にはベストなタイミングを狙いつつ、
邪魔にならないよう、かつ映してはいけないものはハブきつつ…
といった具合で短時間の中で瞬間的にシャッターを切ることが求められるようでした。
迷ってたらここでのカットがなくなってしまった…なんてことのないように、
ある程度基本の構図は決めておいた方がやりやすいのかなと思いました。
 

2. 意識的に足を動かす!色んな角度からの写真を撮っておく

 
img_01
 

撮影したデータを見返すと同じ構図の写真ばかりになってしまっており、
デザイン時に「これの逆向き欲しかったのに…!」という状況に何度も直面しました。
一度シャッターを切り始めるとずっとその場で固定してしまい、
なかなか足が動かないのです。
とにかく意識して、複数の角度からの写真を用意した方が、
後々デザイン作業の際に重宝するなと感じました。
 

3. 何気ない風景も写真に収めておく

 
img_02
 

いざデザイン作業にとりかかると、挿絵として画像を使用することが多々あります。
そんな時のために、必要な写真以外にもパシャリとしておくと
要所要所で使うことができるので便利だなぁと思いました。
特にイイカンジの物撮り写真は絵になるので、なかなか重宝するのではないでしょうか。
ここのエリアの撮影は終わったからいいかな、なんて気を抜かしていると
思わぬシャッターチャンスを逃してしまうかもしれません…
 

撮影中は取り合えずシャッターを切ることであっぷあっぷだった私は、
「設定わたわたいじってたら何も撮れずに終わる…!」な状態でした。
その点は頭のよいカメラさんがきちんとカバーをしてくれていましたが、
自分でももっとスキルを磨かないといけませんね。
次回はもっと余裕をもって取り組みたいものです。
(ちなみに同行された別の方のお写真は使いやすいものが多数でした。流石です・・)