2015年11月27日シェアツイートシェアブックマークユーザーの目を引くwebデザインというのはまさに芸術家レベルで、多くのweb制作者にとって理想と現実の壁にぶつかるポイントと思います。スマートフォンやタブレットの普及に伴って、webデザインの環境も大きく変化しています。レイアウトについては、様々なデバイスに柔軟に対応することが要求され、それに加えてユーザーにとって見やすい・使いやすいレイアウト・デザインが必要とされてきています。多様化するウェブ・レイアウトについて、改めて整理してみたいと思います。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。2つに分けることができます。グリッドレイアウトとは、文字や画像、カラムなど一定の規則に従い、格子状にレイアウトして、整然としたイメージの印象が強いレイアウトになります。多くのテンプレートで、グリッド・レイアウトが利用されています。グリッドレイアウトは、スマホやPC、タブレットなど多様なデバイスに対応しやすい可変レイアウトとして利用することもできます。一方のフリー・レイアウトは、グリッドにとらわれない配置で横幅を固定する「固定レイアウト」にむいているレイアウトになります。Googleのデザイン・ガイドライン専用サイト。フラットデザイン、タイルレイアウトでトレンドにのったデザイン、レイアウト。レスポンシブ・デザイン採用。東京メトロ/必要な情報が一目でわかるようなレイアウト。ノン・レスポンシブ・デザイン。他にも参考になるWebページやテクニックをまとめましたので合わせてご覧ください。そんな方に試していただきたいのがBootstrap。HTMLとCSSの基礎知識があれば、デザイン性に富んだWebページを簡単に作成することができる優れモノのCSSフレームワークです。有名なだけに今更聞けない、Bootstrapの基本的な使い方をご紹介します。[![image](//s3-ap-northeast-1.amazonaws.com/mash-jp/production/uploads/10801/256693045752724213be45e6d8c2aac442c43e65.10872.desktop.jpg)](https://ac.ebis.ne.jp/tr_set.php?argument=qkDLyMCX&ai=CCdesing)可変レイアウトの「グリッド・レイアウト」グリッド・レイアウトには複数の種類が存在しますので、以下にご紹介します。リキッド・レイアウト(LiquidLayout)ユーザーの画面サイズによって、横幅が100%の相対的もしくは可変的に調整されて、コンテンツが表示されます。リキッド・レイアウトのメリットは、テキストや画像などだけではなく、ボックスとしての要素が、PC・タブレット・スマートフォンに関わらず、伸縮して伝えられることです。楽天市場/左右のナビバーは固定幅で、中央の商品群が画面幅に応じてレイアウトが変化。フレキシブル・レイアウト(FlexibleLayout)各要素を%で指定しますが、最小幅と最大幅も指定してレイアウト崩れをカバーする特徴があります。最大幅を決めている(960pxなど)ので、大きな画面サイズで視聴した場合は、周りに余白が生まれ、PCで見た時だけ幅の固定をしたい場合などに使われるレイアウトです。Photo:LIGINC.可変グリッド・レイアウト(FluidGridLayout)一定のグリッドにそってカード(短冊)型のコンテンツを並べ、ウインドウ幅が変更されるたびにコンテンツを再配置します。再配置にはjQueryなどのプログラミングが活用されます。情報系サイトに多く使われますが、小さい画面になると縦長になって、「見ずらい」と感じる人も少なくありません。「タイルレイアウト」「カードレイアウト」といわれるレイアウトはこの種のレイアウトになります。Photo:LIGINC.エラスティック・レイアウト(ElasticLayout)全ての要素単位をemで指定して、ブラウザ幅をかえてもコンテンツ全体がズームするレイアウトになります。現在はブラウザにズーム機能があるためあえて必要性はなく、ノン・レスポンシブ・サイトをスマホで開いた時に見えるレイアウトがこれにあたります。レスポンシブ・ウェブデザインブラウザの横幅に応じてページのレイアウト・デザインや画像サイズを柔軟に調整できるレイアウトで、現代の主流レイアウトとなっています。HTMLファイルを、CSS3で制御して、画面サイズに適したページ・レイアウトに調整されます。東京銭湯/都内各地の銭湯を紹介。カラムレイアウトも巧みに使ったレスポンシブ・デザイン。馴染みのある「フリー・レイアウト」フリー・レイアウトは、予め決められたページ幅でコンテンツをレイアウトしますので、画面幅の変動によるレイアウトを気にすることもなく固定レイアウトとして使うことができます。掲載する情報量が多い場合などにフリー・レイアウトはよく用いられます。ユーザーのデバイス環境によってはページが見づらく、SEO的にも有効ではありません。財務省/フリーレイアウトの特性を生かしたコンテンツ内容。「日本の財政を考える」や「個人向け国債」の紹介ページでは、標準レイアウトと違うレイアウトでおもしろい。最適化したレイアウト。ナビバーやタブの使い方が巧み。カラム・レイアウトとはウェブ・レイアウトにおける「カラム」とは、ページ垂直方向の区切りの事を指します。1カラムは区切りが無く、ウィンドウ幅全体を使うフルスクリーン・レイアウトなどによく用いられます。ブログ・サイトなどは2カラム、3カラム・レイアウトがよく用いられます。見た目重視の「1カラム・レイアウト」1カラム・レイアウトも「フルスクリーン・レイアウト」や「ランディング・レイアウト」、「シングル・レイアウト」などいくつかのレイアウトが存在します。レイアウト・パターン以外にもFlashを使うか動画を使うか、パララックス(parallax)デザインを使うかによってもサイトの印象は大きく変わってきます。以下に1カラムを使ったレイアウト事例をご紹介します。フルスクリーン・レイアウト古宇利島/古宇利島の美しい自然を前面にだしたレイアウト、背景写真が変わる点もすばらしい。1カラム、フルスクリーン、レスポンシブ。ノン・フルスクリーン・レイアウトインターネット活用コーチ福田浩/シンプルで読みやすい表示内容のレイアウト。1カラム、ノン・レスポンシブ。ランディングページのレイアウトLancers/国内業界最大手のランディング・ページのレイアウト。1カラム、ノン・レスポンシブ。シングル・レイアウトJamesBond007CarsEvolution/キレイなタイムライン表示を実現したレイアウト。1カラム、レスポンシブ。Flash採用の1カラム・レイアウトサンテン/見ている人を楽しませるサイト・デザイン。1カラム、ノン・レスポンシブ。動画採用の1カラム・レイアウトLocalytics/思わず見とれてしまう動画を挿入しているレイアウト。1カラム、ノン・レスポンシブパララックス採用のレイアウト東京スカイツリ―/東京スカイツリーをうまく表現しているレイアウト。【初心者向け】無料で使えるHTMLのおすすめエディタ5選HTMLを書く上で、欠かせないのが、テキストエディタです。プログラミング初心者にとっては、どのテキストエディタを使えば良いのか、迷いどころだと思います。エディタには、有料のものもありますが、無料で利用できるものも、多々あります。今回は、無料で使えるエディタを厳選して紹介します。UI的にイイ「マルチカラム・レイアウト」ユーザー・インターフェース(UI)的に優れたデザインとして「マルチカラム」は多くのサイトで利用されています。商用サイトをはじめ、ブログ、ポータルサイトなど視覚的に慣れているレイアウトでもあります。多くの場合が2カラムもしくは3カラムですが、コンテンツによっては4カラムなどもあります。うまくまとめられたコンテンツ・レイアウト。2カラム、グリッド、レスポンシブ。ポータルサイトの定番レイアウト。3カラム、フリーレイアウト、ノン・レスポンシブ。広告力のあるレイアウトサイト・トップ画面の上部に広告を表示するレイアウトもアリ?かもしれません。Bloomberg/膨大なコンテンツ量とカッコいいレイアウトが両立しているサイト。レスポンシブ・デザイン。Inc.com/シンプルで見やすいレイアウト、レスポンシブ・デザイン。最新技術もチェックするブラウザ上のwebレイアウトは、基本的に第3者でも閲覧することはできます。今見ているサイトのCSSをはじめ、レイアウトもチョットした操作で確認できます。レイアウト/ブラウザ上で右クリックをして「要素を検証」を開きます。要素上にカーソルを合わせると、表示されている画面のレイアウト要素を把握することができます。CSS/ブラウザ上で右クリックをして「ページのソースを表示」とすると、スタイルシートのファイルおよび中身が見えます。CodeCamp提供のデザインマスターコース当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴はデザインからコーディングまでWebデザイナーに必要なスキルを獲得できるWebデザイナーとして転職・フリーランスも可能になる実際にWebサイトを作るのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。\一流デザイナーのスキルが身に付く/CodeCampの無料体験はこちら▶︎無料体験レッスンの申し込みはスマフォで1分で完了!まとめwebレイアウトは、種類が無限に近いぐらい多く、新しいデザイン・技術を活かしたモノも次々と登場してきています。その時々の流行りのレイアウトもあり、これからwebデザインを手がけるならなるべく最新のトレンドを取り入れたい、と考えている方も少なくないでしょう。凝ったレイアウトにすると、ブラウザによってうまく表示されなかったり、ページの読み込みに時間がかかったりなど障害が発生することもあります。web制作する目的を明確にし、ユーザー目線を忘れないことも重要と考えられます。家事も仕事もプログラミングも。【2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。