Browsing articles in "WebDesign"
6月
20
2012

ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン

ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン

実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。

10 Evergreen Website Layouts (that will never go out of style)

 

下記は各ポイントを意訳したものです。

 

2カラム、広いヘッダ

これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。
慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイトでは左に置くのが多いです。

Uncrunched

3カラム、広いヘッダ

BloggerやWordPressによって流行ったレイアウトで、前述の2カラムと異なる点は、狭い二つのカラムで広い一つのカラムを挟むことです。狭いカラムはナビゲーションなどのエレメントを含み、中央の広いカラムはプライマリコンテンツを配置します。
広いヘッダは三つのカラムをまたぐように配置します。

Gary Vaynerchuk

フォーボックス

プロダクトやニュースブログでよく見かけるレイアウトで、広いヘッダと同じ幅のボックスが一つあり、その下に小さいボックスが並んだレイアウトです。小さいボックスは2~5個くらいです。
大きいボックスには打ち出しコンテンツを配置し、小さいボックスにはそれを補足するものや第二の情報を提供します。非常にシンプルですが、ビジュアル的に劇的なレイアウトです。

Flickr

不確定なグリッド

不確定なグリッドレイアウトは従来のグリッドベースのレイアウトと比べて、非常に歪んでいるようにします。各エレメントをサイトの幅に広げた不確定なボックスに配置します。これらのボックスの高さと幅は変化することができ、それはレイアウトにビジュアルのエネルギーを加えます。
このレイアウトは非常に難しく、またユーザビリティの問題がつきまといます。しかし、独創的な印象を与えるのは間違いないです。

Siete De Febrero

大きいスクリーンショット

ウェブアプリケーションやソフトウェアに適したレイアウトで、ヘッダの直下に大きいサイズのスクリーンショットを配置します。画像は高精細のものを使い、プロダクトを魅力的なものにします。
大きいスクリーンショットに続く情報は、グリッドベースのボックスに、数は倍数(2か4)にします。

Paper

シングルカラム

このレイアウトはミニマリズムなデザインではまり、ポートフォリオサイトなどでよく見かけます。たった一つのカラムはだいたい640pxくらいの狭いもので、追加のナビゲーションなどはフッタに追いやられます。ナビゲートすることは難しいですが、ミニマリズムのデザインには最適なレイアウトです。

Visual Craftsman

打ち出し画像

このレイアウトはスマートフォンアプリなどでよく見かけます。大きな打ち出し画像を左に配置し、それに続くコンテンツを一つのカラムに配置します。ヘッダは通常ミニマリズムなものにするか無しで、フッタは最低限のものだけにし、メインとなるダウンロードページへユーザーを誘導します。

Instagram

固定サイドバー

すべてのナビゲーションエレメントを含んだサイドバーを固定表示にするレイアウトで、プライマリコンテンツはスクロールが可能です。固定サイドバーはナビゲーションを容易にしますが、ユーザビリティに影響を与えてしまいます。

Gawker

グリッドベースのギャラリー

フォトグラファーやデザイナーに人気の高いレイアウトで、彼らのポートフォリオに理想的なレイアウトです。横列は2~6カラムにし、縦列でギャラリーに必要な数を増やします。エフェクトはクリエイティブなものが多く、非常にビジュアル的なものが多いのも特徴です。

YourNeighbors.de

マガジンスタイル

このレイアウトは従うべき規則はほとんどありません。デザイナーはかなり大きなカンバスを使ってデザインをします。典型的にはもっとも重要なコンテンツが目立つよう配置し、ほかの情報もそのプライオリティに従って整理します。
レイアウトの複雑さはユーザビリティに影響を与えますが、ニュースサイトやオンライン雑誌では多くの情報を掲載することができます。

New York Times

5月
31
2012

35 Fresh Internet Startups Featuring Brilliant UI Design

35 Fresh Internet Startups Featuring Brilliant UI Design

35 Fresh Internet Startups Featuring Brilliant UI Design


Just back a decade ago everybody was talking about web 2.0 trends. The Internet was bustling with hundreds of new startup ideas following MySpace, Friendster, Facebook, Twitter, and now even things like Foursquare and Pinterest. The advancing world of tech startups has proven there is no shortage of new ideas.

And when it comes to web design the scenario is very similar. I have put together 35 examples of new startups which feature brilliant layout designs. Some are web applications, others are social networks, and even a few sites are built around mobile apps. But all of these startups bring new ideas into an otherwise stagnant digital market.

Saas Pose

 

All My Apps

Medigram

Collba

Path

Popset

SendHub

Localmind

Pinterest

Punchfork

BrandMyMail

Hall.com

Bugrocket

Picfull

Trippy

Farmigo

Fab.

bre.ad

we heart it

Sparked

JobSpice

Onswipe

Papyrs

meetin.gs

Magisto

Vayable

Star.me

Slidebomb

like.fm

Chewsy

Keepio

Miimr

Gridulator

ffflourish

Clueapp

11月
27
2009

第2回「Coming Soonページをデザインする」

http://www.mdn.co.jp/di/articles/664/?page=2

第2回「Coming Soonページをデザインする
2009年11月26日
翻訳元サイト:Smashing Magazine
http://www.smashingmagazine.com/

原文:Designing “Coming Soon” Pages
http://www.smashingmagazine.com/2009/11/10/designing-coming-soon-pages/

翻訳:中野恵美子
※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています
ドメインを購入したが、まだWebサイトをローンチしていない時、何をすべきか決めるのは、いつでもちょっとした難問だ。ドメイン管理団体やWebホスティング会社のデフォルトページをそのまま表示させておくのは、プロらしいとは言えない。とはいえ、Webサイト制作に本格的に取り組むべき段階では、汎用的なページに時間をかけたくないだろう。
最適な方法は、最終的にそのWebページでどのようなコンテンツが登場するかを訪問者に通知する、シンプルな「Coming Soon」ページを作成することだ。良いComing Soonページには、基本的に2種類のバリエーションがある。ひとつ、ローンチ後、訪問者にどんなコンテンツが登場するかをを知らせる情報デザイン、もうひとつはアップデートのお知らせが受け取れるようにユーザー登録を促したり、ベータ(もしくはアルファ)版への招待状が受け取られるような仕掛けを施したページだ。以下にいくつか、それぞれのタイプのすばらしい例、そしてみなさん自身のComing Soonページを作成するためのベスト・プラクティスをご紹介する。なお、以前Web上でよく見かけた、いわゆる「工事中」ページは掲載していない。

11月
27
2009

第1回「Twitterの効果的な背景画像:事例と現行のプラクティス」

http://www.mdn.co.jp/di/articles/664/

第1回「Twitterの効果的な背景画像:事例と現行のプラクティス
2009年10月20日
翻訳元サイト:Smashing Magazine
http://www.smashingmagazine.com/

原文:Effective Twitter Backgrounds: Examples and Current Practices 
http://www.smashingmagazine.com/2009/09/18/effective-twitter-backgrounds-examples-and-best-practices/

翻訳:中野恵美子
※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています
Smashing Magazineは約1年ほどTwitterを利用している(@smashingmag)が、オーディエンスと交流したり、コネクションを築いたり、デザイン関連のトピックについて議論したり、素晴らしいプライズを贈ったりするための効果的なツールとなっている。しかし、1年経ってもまだ、 Smashing MagazineはTwitter背景画像ページを持っていない。そろそろこの状況を変えるべき時だろう。自分たちの背景画像ページをつくろうと決心したので、まず最初に、ほかのデザイナーたちがどのようにして非常に目をひく美しいTwitterページを作成しているのか、そのTipsやテクニックを知りたいと考えた。
プロフィールページはビジュアルブランドを公開し、Twitterでのつぶやきよりも継続的に付加情報を紹介できる唯一の場所だ。背景やテキスト、リンクの色を変えることで、プロフィールページをカスタマイズすることができる。スキンを変更するのと同じくらいシンプルだが、背景画像を変更できれば、デザイナーは非常にユニークなプロフィールページを作成することが可能になる。
本稿の第一の目的は、ユニークで印象的、かつ効果的なTwitterプロフィールページをつくるための、さまざまなテクニックを探求することだ。しかしその前に、Twitterのプロフィールページの構造について、簡単に見ておこう。

11月
19
2009

FLASHサイト

mixiの上に広告に出てる全日本バーべイタム選手権というサイト。

これ作った城戸さんっていう人すごいな…。flashでこんなリアルな3D表現できんだ

http://www.verbatim.jp/senshuken/

ビーチボーイズロケ地周遊案内サイト

http://sen-i.com/beachboys/apri1.html

8月
17
2009

発想力

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

よくあるパロディー雑貨。

この発想力はいったいドコから沸いてくるんですかね?

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

いつもお世話になってる楽天楽天でさえ薬天草ですよw

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

サンクスコンビニがChinkasって!!w
Positive Life - 「伝える」 webデザイナーを目指す夢日記-
Positive Life - 「伝える」 webデザイナーを目指す夢日記-
発想力も大事だけど、ユーモアがあるのがいいですよね!

何事もちゃんとオチつけないとですよね?w

8月
9
2009

色合い

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

この色合いが素敵だわー

6月
5
2009

Bufferin

頭痛の時はいつもお世話になってる「バファリン」のサイトですくすり箱。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

このサイトmixiのログイン画面の広告になっていて、

何気なくクリックしてみたらめっちゃ癒されたぁぁぁぁぁぁsquirrel*ハート

リスさんが頭痛のタネを食べてくれちゃいますキラキラ

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

リスさんの質問に答えますチェック

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

最後に思いっきりブチまけちゃいましょうおーいぎゃー

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

黒いモヤモヤの中にさっきの言葉が!!☆

Positive Life - 「伝える」 webデザイナーを目指す夢日記-
そのモヤモヤが頭痛のタネになっちゃいました芽

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

これが私の頭痛のタネでございますドリアン

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

あぁ…リスさんがこんなに可愛らしい姿でタネを食べてくれちゃいます?*d.heart*

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

そのお通りでございます笑

実は今日はとってもイラッとしていたのですが…

なんかこのリスさんにスゴイ癒されちゃいましたてへ

年会費無料のクレジットカードなら「楽天カード」