エンジニアの副業は週1からでも可能？副業の例や探し方も解説
- ITエンジニア
- 副業
デバイスの多様化にあわせて欠かせないデザインとなったレスポンシブデザイン。改めてその定義と、デザインするときに覚えておきたい3つのポイント、実際の使用例をご紹介します。
レスポンシブWebデザインとは？
パソコンやスマートフォン、タブレット等の多種多様なデバイスが普及した今、ユーザーがWebサイトを閲覧する環境はさまざまです。こうした異なる環境に対応してサイトが変化するようなデザインを、「レスポンシブデザイン」と呼びます。
Webサイトにレスポンシブデザインを適用すれば、幅1292ピクセルの環境ではレイアウトを4段で表示し、幅1025ピクセルの環境の場合は自動的に2段に変更する、という臨機応変な対応が可能になります。
おさえておきたい3つのポイント
メディアクエリとCSS transitionを使う
レスポンシブデザインについて説明する上で欠かせないのが、メディアクエリの設定です。メディアクエリを設定するにあたっての課題として挙げられるのが、画面の大きさを変えるとデザインが突然変化するという現象を避けることです。
デザインが変化する際の動きを滑らかにするために、transitionプロパティを活用するのがおすすめ。CSS3から使えるようになったアニメーションに掛かるプロパティで、移動時間を調整できます。
CSS3には、変形やアニメーションを表現するプロパティとして、ページの表示後に動くanimationと形そのものを変えるtransformがあります。
データテーブルはグラフに置きかえよう
データテーブルを含むページは、レスポンシブデザイナーにとって難しいとされています。全体を表示しようとすると文字が小さくなりすぎしまったり、文字を読むためにズームすると画面には一部分しか表示されなくなったりと、ユーザーにとって使いづらいデザインになりがち。
入力される文字数や内容が全く違う中でデフォルメすることは論理的には難しく、都度調整が必要です。
この問題を解決するために有効な方法のひとつが、データテーブルを円グラフやミニグラフに変えてしまうことです。ミニグラフであれば、狭いスクリーンでも見やすく表示させることができます。
レスポンシブデザインにおける画像
インターネットを閲覧していると、画像サイズがウィンドウサイズからはみ出して横にスクロールしなければならない場合がよくあります。
レスポンシブデザインにおいて、画像はコンテキストアウェアネスという概念の上に成り立っています。ユーザーがスクリーンの大きさを変化させると、画像の大きさもそれに合わせて変化するのです。最新の開発ツールやプログラミング言語によって、画像の大きさを滑らかに変化させることができるのです。
解決法はシンプルで、CSSで横の最大幅を100%指定してあげると画面サイズにあわせて画像が伸縮します。
レスポンシブWebデザイン、48の実例
Designmodoはすっきりとした簡潔なデザインの、完璧なサイトです。画面の大きさに応じて、画像やテキストがさまざまなサイズに拡大縮小されます。
今日では灰色がかったグリッドスタイルのデザインは少し退屈に思えるかもしれませんが、リリースされた際はこのハイエンドのレイアウトはとても話題になりました。
その主な理由は、デザイナーが当時人気を集めていたレスポンシブデザインに焦点を当てたことです。このデザインは、グリッドスタイルのレイアウトにおけるレスポンシブデザインのお手本になりました。
建築事務所やデザイン事務所のWebサイトにおいては、スキルや経験、クライアントなどの写真がメインになることがしばしばあります。
このランディングページは3つのメインセクションから成り立っており、それぞれが背景画像によって識別できるようになっています。読者が快適に閲覧できるように、柔軟に適切な構成に切り替わります。
レスポンシブという観点から見ると、このWebサイトはトップレベルです。特に優れている点として挙げられるのは、①大きなタイポグラフィーのメッセージ②分かりやすいメインメニュー③ブログ形式のレイアウト、という三種類の要素がすべてのサイズにおいて表示されるという点です。
このサイトは、上記のような要素をどのようにしてレスポンシブデザインに当てはめればいいのかというヒントを、私たちに与えてくれます。
Sparkboxは、企業のWebサイトのベーシックなお手本であるといえます。デザインは控えめで、シンプルな構成です。このようにシンプルなWebサイトは、簡単にさまざまな画面サイズにあわせてレイアウトを変更させることができます。装飾が少なくすっきりとしたデザインなので、非常にスムーズにレスポンシブデザインに適応します。
Food Senseは、左側にメニュー・右側においしそうな料理の写真という標準的なブログ形式のレイアウトから、画面の大きさにあわせてブロック型のレイアウトに変化します。
こうしたデザインの変化は、モバイルユーザーを惹きつけ、新しい閲覧者を獲得し、かつ美しいデザインを保つための典型的な解決策であるといえます。
The Boston Globeは、ニュース関係のWebサイトにおいてレスポンシブデザインの完璧なお手本といえます。オンラインマガジンを運営し、頻繁に更新したいと思っている人にとって、とても役立つアプローチを提示しています。
このWebサイトは一見複雑で扱いにくいように思えますが、実際にはとてもプリミティブな方法で解決をすることができます。全ての情報を三つの列に分け、サイズにあわせてそれを徐々に減らして最終的にひとつの列に絞るのです。このようにすれば、ブロックごとの順序を決めることもできます。
Think Vitaminは、正直なところブログデザインについては特に何かがとても秀でているとはいえません。しかし、レスポンシブデザインを効果的に使用していることに加え、カラーパレットによってソーシャルメディアや広告などとコンテンツを差別化するなどの工夫によって、モバイルユーザーにとって読みやすい環境を提供しています。
Sasqatch! Music Festivalのようにビデオを含む複数のメディアコンテンツを含んでいるWebサイトが、全てのコンテンツをモバイルデバイスからも正しく表示させるのは至難の技です。しかし、このWebサイトはとても精巧にレスポンシブデザインを取り入れています。小さな画面から閲覧しても、オリジナリティやクリエイティビティといった魅力を失わないような工夫がされているのです。
Internet Imagesも今までに挙げたいくつかのWebサイトと同様に、フレキシブルですっきりとした横長のレイアウトです。このWebサイトでは、色で視覚的にブロックを分けるという工夫により、レスポンシブの効果を高めています。
このようなシンプルかつ効果的な組み合わせによって、連続的で退屈になりがちな小さな画面でのレイアウトが、閲覧者にとって読みやすいものになっているのです。
大きい画面だけではなく小さな画面でも美しいデザインを保つことによって、①デバイスに関係なく読みやすい環境を提供できる②情報のヒエラルキーを上げるためのしっかりとした外観を構築できる②モバイルデバイスからの閲覧者にも簡単にメッセージを伝えることができる、という利点があります。デザインは他のものと変わりませんが、既存の要件を満たしたいという強い意志によって、サイトのレベルは格段に上がります。
Seminal Responsive Web Design Example
「効果的なレスポンシブデザインの例」という名前の通り、このWebサイトは完璧なレスポンシブデザインの例を提示しています。しかも、「フレキシブルグリッド」というタイトルによって、システムの劣化を最小限に抑えるために代替手段を用意しているということがわかります。制作者は美しい外観よりも、理想的なデータプレゼンテーションに重きを置いているのです。
デモページにはナビゲーション、テキストブロック、グリッドスタイルのエリア、ロゴのイラスト、という最低限必要な要素が含まれています。どのようなレイアウトにすれば、モバイルユーザーに快適な閲覧環境を提供できるのかということを紹介してくれています。
Naomi Atkinsonは、フロントページにモザイクスタイルのレイアウトを採用しています。この方法は、Webポートフォリオを作るにあたって作品に焦点をあてたいという場合に広く用いられているものです。
このWebサイトについては、モザイクのデザインの美しさというよりも機能の面がとても優れています。画面を小さくした際に、配置されているグリッドが正しく変化するようになっているのです。機能が優れているだけではなく、サイズを変えた際のレイアウトの変化はプロジェクトに魅力を与える快適なエフェクトに支えられています。
Forefathers Groupは、文句のつけようがないほど素晴らしいWebサイトです。他と比べ物にならないほど圧倒的に洗練されたデザインの随所に、制作者の出し惜しみしない芸術性へのこだわりが見て取れます。
レトロスタイルのタイポグラフィ、手描きのイラスト、テクスチャー付きの背景、素晴らしいグラフィックといったWebサイトを彩る要素が、テキストコンテンツと巧みに組み合わせられています。また、モバイルデバイスからでも快適に閲覧できるように細部まで工夫されています。
Spigot Designにおいては、一般的なレイアウトの変化による印象よりも、ビデオやダイナミックなグラフィック、そしてメニューの印象が強く残ります。制作者は全てを計算して、どのような大きさの画面からでも魅力的なエフェクトと余白を含むエレガントなデザインが保たれるように調整しているのです。
New Adventures In Web Design Conference 2012
New Adventues In Web Design Conference 2012は、フレキシブルグリッドによって多くの潜在顧客を獲得しています。このケースでは、Webデザインの質の高さは外観に貢献するだけではなく、イベントを控えめにサポートすることにも役立っています。
このWebサイトはWebデザインのカンファレンスのためのページであるため、制作者は一般のユーザーに対してデザインにこだわりがあるということをアピールしなければなりません。そのため、全ての仕様を備えたWebサイトを制作することが成功への道なのです。
レスポンシブという要素は、ハイレベルなプロモーションサイトにおいて必要不可欠な機能です。Illy Issimoはコツをつかんで、①快適なユーザー体験を提供する②ターゲット層を広げる③モバイルユーザーの利用を促進する、という三点のためにフレキシブルグリッドを活用しており、その成果は確実に現れています。
Arrrrcamp Conferenceは、マルチメディアよりも文章にフォーカスしています。そのためページのうち大部分が文字とモノトーンの背景で、トレンドの「ゴースト」ボタンが採用されています。
フロントページは、画面の大きさを変更するとそれに対応して変化します。Rubyを愛している人はインターネットコンフェレンスにおいてモバイルデバイスをどう使うかをよく知っているので、このWebサイトは1920pxから240pxまでの全ての解像度に対応しています。
Robot or Notはフレキシブルグリッドを採用したデモサイトです。画面全体に文章とマルチメディアをどちらも配置し、装飾やクリエティブなスタイルを排しています。制作者は、さまざまな画面サイズに応じたレイアウトの変化を、初心者にもわかりやすく明確に提示しています。
Earth Hourは、ビデオと写真をどちらも含む、ハイレベルで複雑なWebサイトです。また、美しいグラフィックとスムーズなトランジションにより、記事に閲覧者の注意を誘導することに成功しています。しかし残念ながら、タブレットより小さいデバイスからの閲覧にはいくつか問題があり、うまく適応しているとはいえません。
Teixidóは、テクスチャーやイラストレーションなどを活用することによって、ユニークで目を惹くデザインにしようという工夫がされています。大掛かりな仕掛けやダイナミックな動きはありませんが、優れたレスポンシブデザインのWebサイトであるといえます。
Ribotはモバイルデバイスを専門とする、ハイエンドのデジタルデザインスタジオです。当然自社のWebデザインも、ガジェット等を活用し、モバイルユーザーにも会社の魅力が伝わるような適切なデザインを採用しています。
Deren KeskinのWebポートフォリオはすっきりとしたコンパクトなデザインで、ブログも含め、全てのページはブラウザのスクリーンにおさまるように設計されています。つまり、どのような画面サイズから閲覧しても画面に完全におさまるように圧縮されるのです。これに加え、Webサイトのレイアウトが画面サイズに応じて変わっても、情報の優先順位が崩れないように慎重に管理されています。
今までの例と同様に、Sweet Hat Clubのデザインはタイトにまとめられています。帽子好きの人のためのこのWebサイトは、新聞のようなレイアウトによって主に画像にフォーカスするようにデザインされています。メインである画像は画面サイズに応じて適切に大きさが変わるように工夫され、しかも小さい画面で見た際にも大きい画面と変わらず2カラムで表示されるようなデザインになっています。
現在このWebサイトは閉鎖されてしまっています。ホームページには、過去のプロジェクト、リンク、イラストに関する情報が載せられています。懐かしさを感じさせる静的なWebページです。しかし、閉鎖してはいるものの、レスポンシブデザインはきちんと機能しており、モバイルデバイスからの閲覧にも対応しています。
dConstructは、テクノロジーやカルチャーに関するカンファレンスやワークショップに特化したWebサイトです。デザインは目新しくはありませんが、工夫されている点には目を見張るものがあります。フロントページで閲覧者の目を惹くのは、①講演者とワークショップの講師②イベントの説明③スポンサー、という三つの情報に絞られています。これらがこのWebサイトが最も閲覧者にアピールする必要があるポイントなのです。
タイトルの通り、このWebサイトはアダプティブデザインに特化しています。より正確にいえば、アダプティブデザインに関する本のプロモーションのためのWebサイトです。開発者は、さまざまなデバイスからアクセスした際にどのようにレイアウトを変化させるかWebサイトを通じて提示することで、本を効果的に宣伝しているといえます。
Authentic Jobsは求職者と雇用者を結ぶためのオンラインディレクトリです。レスポンシブデザインを取り入れることによって、データは画面の大きさに対応したリストスタイルのレイアウトで表示されます。サイドバーの位置が移動する以外は、構造が同じなので変化はほとんどありません。
このWebサイトは閉鎖されており、閉鎖の挨拶と有益な情報のリストのみがすっきりとしたデザインの中におさまっています。閉鎖されていても、Webサイトは現在の要件を満たしており、モバイルデバイスからの閲覧に完璧に対応しています。
Splendidはアーティストのスキルや経験を閲覧者にアピールするためのシンプルなWebポートフォリオです。デザイナーは自分を表現するためにミニマルなデザインを採用しており、他の洗練された装飾的なWebサイトとは対照的なデザインです。
しかしこのケースでは、最小限のデザインが最小限の機能性を意味するわけではありません。画面の大小にかかわらず、きちんとレイアウトが対応するように慎重に設計されているのです。
Ryan O’RourkeのWebポートフォリオは、ミニマリズムを極めています。Webページはひとつしかなく、そこには一文とメール、活動を伝えるためのgifアニメーションしかありません。しかし以前の例と同じように、このWebサイトもモバイルデバイスからの閲覧に柔軟に対応しています。
Flexsliderはシンプルなセマンティックマークアップと、人気のデバイスにおける理想的なイメージショーケースの頼れる相棒となるべくあらゆる機能が搭載されたWooThemesのライトウェイトjQueryスライダーです。にもかかわらず、製品を宣伝するWebページはスライダー自体とは異なり適応性がありません。残念ながら、制作者はこの点を見落としてしまったようです。
El Sendero del Cacaoは、穏やかで暖かい雰囲気が視覚的に伝わってくる魅力的なWebサイトです。柔らかな色彩、雄大な画像、適正なグラフィックがこうしたイメージを支えています。そして、①レスポンシブレイアウト②ブラウザ間の互換性③わかりやすいナビゲーション④多言語サポート、という不可欠な要素が、Webサイトをわかりやすく楽しいものにしています。
Do Lecturesは多くのニュースや投稿に対応する3カラムフォーマットレイアウトのブログです。このWebサイトは従来型のマークアップと動的な要素の欠如によって、少し古い印象を与えています。Retinaディスプレイのサポートにより、大きなデスクトップとノートブックのスクリーンではとても綺麗に見えますが、モバイルデバイスからの閲覧となるとそうともいきません。モバイルデバイスについてはサポートが万全ではなく、水平方向のスクロールバーが表示されてしまいます。
今日では、多くの教育機関が独自のWebサイトを所有しています。St Paul’s Schoolの公式ページも例外ではなく、①控えめな外観②情報が豊富なホームページ③包括的なナビゲーション、そしてもちろん④モバイルユーザーにも対応しています。フレキシブルグリッドを採用しており、とても優れたWebサイトであるといえます。
Naomi Atkinson Designはイギリスの小規模で熱心なデザインスタジオです。ボックススタイルのレイアウトを採用しており、簡潔でミニマルな中にも①簡潔かつ効果的にデータを提示する②ポートフォリオにすぐ注目させる③フィードバックをしやすいように工夫する、という要素が含まれています。また、このようなデザインはレスポンシブに変換しやすいということも大きな利点であるといえます。
Webサイトを見ただけで、アーティストが写真に夢中になっていることがはっきりとわかります。彼のWebポートフォリオには、写真がたくさん掲載されています。フッターに配置されたナビゲーションと小さなパネルを除けば、テキストは全くありません。さらに、小さな画面に対応する際に発生する不具合を避けるための工夫がしてあるため、閲覧者は画面の大きさを気にすることなく作品を楽しむことができます。
Stunning CSS3 Media Queries Example
レスポンシブに欠かせない要素として開発者の間で非常に人気があるのが、メディアクエリです。このWebサイトにおけるデザインやスタイル、セマンティックは目新しくありませんが、今回注目したいのはそうした点ではなく、フレキシブルグリッドです。このWebサイトは、標準的な4カラムレイアウトが、グレースフルデグラデーションにどのように対応するのかという例を提示しています。
Nordic Ruby ConferenceのオフィシャルWebサイトには、①すっきりとしたデザイン②テクスチャ付きの単色の背景③整った形式のレイアウト④情報が豊富なホームページ、という要素が含まれています。これらの要素によって、プロフェッショナルな雰囲気で、かつ楽しいWebサイトが支えられているのです。ベースとして使用されているレスポンスグリッドにより、幅広いユーザーにイベントをアピールすることが可能になっています。
Halifax Game Jamは独創的なフライヤーからインスピレーションを得たホームページで、素晴らしいイラストとオリジナリティあふれる背景により、閲覧者にアーティスティックな印象を与えます。
そうした芸術的な側面を支えるものとして、制作者は①優れた外観②レスポンシブレイアウト③ブラウザへの適切な対応、という三つの要素を、たった一ページのWebサイトに組み込んだのです。
①新しい閲覧者のためのヒーローエリア②滑らかなエフェクト③スライドアウトナビゲーション③フラットスタイルのグラフィック、という要素を見ても分かるとおり、制作者は最近のトレンドを意識してこのWebサイトを制作しています。また、インターネット上での競争力をより高めるために、フレキシビリティを高め、いくつかの機能を追加する等、よりよい環境を提供する努力を惜しんでいません。
ASU Onlineは、ローカルな大学のWebサイトです。デザインは非常に控えめですが、フロントページには閲覧者のための情報が全て用意されています。機能に関しては、①レスポンシブ②SEO最適化③ブラウザ間の互換性、という三つに力を入れています。
WWF関連のWebサイトである3200 Tigersは、①現代的なフラットスタイルのデザイン②最適な情報ヒエラルキー③レスポンシブ、という要素を重視することによって、可能な限り多くの注目を集めることを可能にしています。
Kings Hill Carsは、タクシー会社の公式Webサイトです。ランディングページでは、潜在顧客にリーチするためにさまざまな工夫が凝らされています。Webサイトがさほど魅力的ではないという事実にもかかわらず、アダプティブなのです。この要素はとても重要で、モバイルユーザーを惹きつけてコンバージョン率をあげるためには必要不可欠です。
8 Facesは、読者に「8つの書体しかないとしたら、どの書体を選ぶ？」という質問を投げかけている雑誌です。公式サイトは、①すっきりとしたエレガントなデザイン②広いスクリーンとイメージスライダー③コンテンツを小さな画面にうまくおさめる機能、という三つの要素に力を入れることにより、雑誌の魅力を最大限に伝えようとしています。
Asbury AgileはWebの専門家のためのカンファレンスです。このWebサイトのように、イベントがWeb技術に関連し、ハイエンドのプロフェッショナルを含む場合、オフィシャルWebサイトは現代的なだけではなく①SEO対策②レスポンシブ③ブラウザ最適化、といった要素が必要不可欠です。
AlsacréationsはWebポートフォリオを掲載しているフランスのWebエージェンシーです。デザインそのものには古さを感じますが、とても優れた点もあります。それは、アダプティブグリッドが採用されている点です。これによって、潜在顧客は現在の要件を満たしているのだと感じるのです。
Sleepstreetはモバイルデバイスに完璧に対応したレスポンシブデザインのWebサイトです。また、①グリッドスタイルのレイアウト②暖かく居心地のいい家庭的な雰囲気のレトロな外観③幅広い潜在顧客をカバーする多言語サポート、という強みもあります。
おわりに
レスポンシブデザインにはさまざまな側面があります。アダプティブであるということは、モバイルデバイスに対応しているというだけではなく、大きなデスクトップやノートブックの画面にも適切に表示されなければいけないということです。
さらに、レスポンシブの機能はもはやオプションではありません。アーティストのWebポートフォリオであるか、学校の公式Webサイトであるかにかかわらず、どのような画面サイズにでも迅速かつ効率的に対応する必要があります。
この記事では、テクニックについては触れません。インターネット上に溢れているさまざまなWebサイトが、レスポンシブであることによってどのような利点があるのかということを明らかにするのが、この記事の目的なのです。
（翻訳：Asuka Nakajima）
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Design and Web Development Magazine. We provide design, web development, premium products, quality freebies.
この記事はDesignmodeからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
Responsive Web Design: 50 Examples and Best Practices
