最近よく見かけるシングルページを作るデザイン塾。第4回では、メインビジュアル、アバウト、使い方ページを作成しました。
最初に示したデザインの一番下のブロックは、デザインをした時点では一番下の部分に何をどのように入れるかまったく決めていませんでした。さて、どうしましょう。背景もオレンジにしていましたが、なんだか微妙な気もしてきました。
最初のデザイン
ユーザー一覧を作ろう
考えた末、ユーザー一覧を表示することにしました。ユーザー一覧は3列にして、ユーザー1人に対して表示する要素は、サンプル写真、名前、コメント、ユーザーのWebサイトや連絡先へのリンクボタンにします。その後、コンタクトのためのフォームを含んだフッターを追加して、サイトを完成させます。
作成するユーザー一覧
ユーザー一覧部分は、デザインデータを用意せず、HTMLとlessをいきなり書いて内容やレイアウトを調整してみます。3列横並びのレイアウトをするには、Bootstrapの写真などを並べたいときに使えるパーツ「components」が簡単です。
Bootstrapのcomponentsページ
下部にある「Custom content」のコードを流用します。
■Custom contentサンプルHTMLソースコード（緑色の部分が変更を加える箇所）
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
■サンプルコードを元に作成したHTMLソースコード（緑色の部分が変更した箇所、赤い部分が追記した箇所）
<div class="row">
<section id="entry" class="entry">
<div class="container">
<h2>プロボノしたい人</h2>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://lorempixel.com/400/300/people/1" class="img-responsive" alt="">
<div class="caption">
<h3>イシジマ ミキ</h3>
<p>Lorem ipsum Adipisicing ea cillum voluptate eu enim ad in Ut officia in aute adipisicing reprehenderit officia eiusmod dolor elit eiusmod minim tempor commodo nostrud sed ullamco adipisicing est irure proident Duis nisi voluptate.</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div><!-- /.caption -->
</div><!-- /.thumbnail -->
</div><!-- /.col-sm-6 col-md-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
</section>
</div>
画像をレスポンシブWebデザインに対するためHTMLソースコード、
<img src="http://lorempixel.com/400/300/people/2" class="img-responsive" alt="">
の「img-responsive」を使っています。「img-responsive」はBootstrapであらかじめ用意されている便利なスタイルです。大きいサイズの画像もこのスタイルを適用しておけば、親要素のサイズに合わせて伸縮します。
画像は、ダミー画像サービス「lorempixel」を利用しました（コラム参照）。URLを入力するだけで希望するサイズ、テーマのダミー画像を表示できます。むやみに大きい画像を使うと表示に時間がかかってしまうので、完成時には軽量化する必要がありますが、デザインしながらコーディングしていく、試行錯誤が必要な場合にはとても重宝します。
p要素にはダミーテキストの「lorem ipusum（ロレム・イプサム）」を入れておきます（コラム参照）。
「プロボノしたい人」を3列並べるためにはグリッドシステムを使います。グリッドシステムを短く解説して理解してもらうのは難しく、また、シングルページの解説というよりは、Bootstrapの解説になってしまうので軽く流します。興味のある人は筆者が解説している動画をご覧いただけると理解しやすいと思います。
グリッドシステムについて筆者が解説しているサイト
デザインをすばやく仕上げる画像、文章のダミー
Webデザインを進めていくとき、画像や文章のダミーを入れて完成イメージを作るときがあります。ダミーとはいえ、画像を探してリサイズしてWeb用に書き出すのは非常に手間がかかります。サンプル文章も「あああ」などの意味のない文字の羅列では、クライアントに見せるのもはばかられます。
■ダミー画像をラクに入れよう
ダミー画像は、無料で提供されている写真を動的に表示してくれるWebサービスを利用して組み込みます。この記事では、カテゴリから写真を選択できる「lorempixel」を利用しました。背景や文字色、表示するテキストなどを設定して表示できる「Dynamic Dummy Image Generator」もあります。
■サンプル文章もラクに入れよう
サンプル文章も「lorem ipusum（ロレム・イプサム）」と呼ばれる典型的なダミー文章を利用します。出版やグラフィックデザインなどでサンプルテキストとしてよく使われているものです。「lorem ipusum」や「lorem ipusum 日本語」と検索するとダミーテキストを生成してくれるサイトが見つかります。エディターによっては、ダミーテキストを入れるプラグインが用意されていることもあります。
lorempixel（左）、Dynamic Dummy Image Generator（右）のトップページ
