こんばんわ。香川です。
年の瀬ですね、師走ですね。香川は11月なのに師走ってます。
師走の使用一番乗りいただきました。
昨日はとあるセミナーに参加してきました。
ということで、今夜のテーマは”レスポンシブデザイン”についてです。
どういうことで？
さてさて、昨今のインターネット事情はというと、スマートフォン、タブレットの台頭で目まぐるしく変化しています。
次々発売される新機種の登場に、嫌気が指しているエンジニアもいらっしゃるのではないでしょうか。
そこで、PC、スマホ、タブレットなど、どのデバイスからサイトを訪問しても、違和感やストレスなく閲覧できるように開発されたのがレスポンシブデザインです。
いわゆるマルチデバイス思考、対応ですね。
画期的です。わざわざスマホサイトを作らなくても良いんですから。
しかし、結論から言うと…どちらにせよ大変なことに変わりありません。
レスポンシブ、スマホサイト作成…どちらが良いかと言われてもわかりません！すみません！
ただ一つ言えることは、「どちらでも作成できる技術を習得しているのにこしたことない」ということです。
クライアントのご要望や、ケースバイケースで動けてこそ本物なのです。
それでは、今回学んだことを一部ではありますがご紹介します。
セミナーは「要件」「設計」「実装」の3部構成に分かれており、それぞれの担当者（職種）に向けた制作的・技術的な話が中心でした。
用件定義（ディレクター等）→設計（デザイナー等）→実装（コーダー等）
その中で、ディレクターもデザイナーもコーダーも自分のパート以外との繋がりを考えながら行動しないといけないということが熱心に伝えられました。
1部の「要件」では、そもそも「なぜレスポンシブデザインを採用するのか？」という根幹の部分を明確にする作業でした。
レスポンシブデザインは、一つ作成するだけで全てに適応できるので「簡単」「1サイトだから安い」「競合もやってるし」などの誤解が生じた概念そのものだけ流行した、言わば人気先行型の技術となってしまっています。
ディレクター、ひいてはクライアントがしっかりと理解しておかなければならないポイントだったので、改めて細分化していくことで面白く感じました。
他のマルチデバイス対応と比較するとわかりやすく、メリット、デメリットについて検討する必要がありました。
ざっくりと挙げるとするならば…
上記などが挙げられるます。一長一短といったところでしょうか。
これらを頭に置きながら、プロジェクトを構築し、チーム全体で認識を統一しておくことが大切です。
次に「設計」部分ですが、Webサイトは「閲覧する人」「編集する人」「検索エンジン」が理解しやすいものを作成することが大切だと学びました。
「理解しやすい」＋「見やすい」＝「編集しやすい」
というテーマを元に、html5、CSS3を使用した制作がベストだという結論です。
しかし、この技術には、スマホはほぼ対応するものの、PCは古いブラウザ非対応というデメリットがついてまわります。
IE8以下への対応策とデメリットをしっかりと念頭に入れた上での設計が肝となってくる訳です。
“プログレッシブエンハンスメント”といった技術を駆使することで対応が可能になりますので、知らない方は要チェケラですね。
もちろん私も知りませんでした。
従来のXHTMLを交えながら、非対応のブラウザに表示を保証する技術のことらしいです。
名コーダーへの道のりは険しいですね。
さらに、重要なポイントでもある、「画面サイズの調整」「高解像度ディスプレイ対応」についてしっかりと勉強しました。
さらっとだけ触れておくと…「画面サイズ」は基本640px、もしくは12の倍数サイズが良い！ということ。
レイアウトに余りを出さないように…グリッド・要素・余白、ライン幅は必ず偶数にする！ということです。
「画像ファイルサイズ」は実際の表示サイズの2倍にするのがポイントです。
そして、コーディング工程からの差し戻しがないよう、ワイヤーフレーム作成時についてのポイントを少々。
必ず「最小幅も想定」「きちんとhtml順に」を意識し、ワイヤーフレームを作成することが大切です。
最後の「実装」部分はあくまでもコーダー向けの技術的要素が主な内容なので割愛させていただきます。
本セミナーで学んだことをまとめると…
「それぞれの職種・役割の担当者が技術的理解をしておくこと」「間違いのない設計」こそが鍵を握るといっても過言ではありません。
失敗例
設計が甘くなる→デザインがまとまらない→コーディングがまとまらない→
ページが無駄に重くなる→途中で仕様変更、軌道修正が入る→やり直しの発生
※上記画像はセミナーパンフレットより抜粋
分かったつもりを「できる」へ変えることができそうです。
今後は積極的に実践していきます。
いよいよ本当の師走に突入しますね。師走師走していこうじゃないですか。
それではまた。
