このページの本文へ

DESIGN イシジマミキの実践!「シングルページ」デザイン塾 ― 第2回

シングルページをデザインする3つのポイントとワークフロー

2014年09月01日 11時00分更新

イシジマミキ/ザ・マーズナレッジ代表

  • この記事をはてなブックマークに追加
本文印刷

 最近よく見かけるシングルページを作るデザイン塾。今回から、CSSフレームワークを使って実際にシングルページを作成していきます。第2回は、デザインツールを使ってページをデザインし、ベースとなるHTMLを作成します。

シングルページをデザインしよう

 最初に、デザインソフトを使ってざっくりと全体のデザインを作成します。今回は、自分自身の経験やスキルを活用してボランティア活動をする人の意思表示やコンタクト方法がわかるWebサービス「PROBONO PAPRIKA」のサービス紹介ページをシングルページで作ろうと思います。

01.png
完成したページ

 自分自身の経験やスキルを活用するボランティア活動はプロボノ(Pro bono)と呼ばれます。このサイトは、メインビジュアル、サイトの内容を説明する「アバウト」、サイトの使い方、の3つのブロックに分け、最後に何かを足そうかなぁ、と宙ぶらりんのままにしています。

 シングルページのデザインポイントは、写真、タイポグラフィ、背景の3つです。以下のポイントをおさえてイメージを固めましょう。

1.写真を大きくフルスクリーンで

 シングルページでは、写真を背景にフルスクリーンで表示させるものがよく見られます。例に挙げたジャズバンド「Melphi」、雑誌『The Great Discontent』のサイトサイトのように、イメージを伝えやすく、美しい印象に仕上りやすいですね。

02.png
ジャズバンド「Melphi」のサイト
03.png
雑誌『The Great Discontent』のサイト

2.タイポグラフィでシンプルにメッセージを訴求

 画面全体に、文字を配置するデザインもシングルページではよく見られます。印象的な書体を使う場合もありますが、見慣れた書体を使ってミニマルな演出をしているケースも多くあります。

 例に挙げたBeard氏Tonnina氏のサイトのように、画面全体に1メッセージといった贅沢な使い方が多いですね。

04.png
サンフランシスコのクリエイティブ・ディレクターBeard氏のサイト
05.png
Tonnina氏の自己紹介サイト

3.色ベタを敷いた背景

 例に挙げた「NINO CUDA」やBelfiore氏のようにサイト背景に色ベタを敷くのも特徴の1つです。色のバランスがちぐはぐにならないように、最初は彩度を揃えることを意識していくと良い仕上がりになるでしょう。

06.png
ninoThemeが配布しているテンプレートのひとつ「NINO CUDA」
07.png
Matteo Belfiore氏の自己紹介サイト

 シングルページのレイアウトはシングルカラムやグリッドを意識した並びが多く、デザイン時には物足らなく感じるかもしれません。しかし、エフェクトを入れたり、レスポンシブにすることを考慮すると、シンプルにしておいた方が安心ですね。

ざっくりと作る

 わたしは、「Sketch」を使ってシングルページ全体をデザインしています。Sketchは非常に軽快でシンプルなベクタードローアプリケーションで、Keynoteを使うような感覚でデザインできます。

08.png
Sketchのサイト

 いくらデザインソフトでしっかり作っていても、シングルページの重要な要素の1つであるレスポンシブWebデザインでは思い通りにならなかったり、スクロール中のアニメーションが再現できなかったりします。そのため、デザインソフトでは全体をしっかり作りすぎず、ざっくりと色や余白、印象をカタチにできればOKです。全体の雰囲気ができれば完成、と考えましょう。

 イメージが固まったら早々にコーディングに移行し、レイアウトに迷ったらまたデザインソフトで調整する、を繰り返したほうが、きちんと動くコードとともに開発を進められるのでスマートです。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング