このページの本文へ

インブラウザーデザインでシングルページを仕上げる

2014年10月14日 11時00分更新

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

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

 最近よく見かけるシングルページを作るデザイン塾。第4回では、メインビジュアル、アバウト、使い方ページを作成しました。

 最初に示したデザインの一番下のブロックは、デザインをした時点では一番下の部分に何をどのように入れるかまったく決めていませんでした。さて、どうしましょう。背景もオレンジにしていましたが、なんだか微妙な気もしてきました。

01.png
最初のデザイン

ユーザー一覧を作ろう

 考えた末、ユーザー一覧を表示することにしました。ユーザー一覧は3列にして、ユーザー1人に対して表示する要素は、サンプル写真、名前、コメント、ユーザーのWebサイトや連絡先へのリンクボタンにします。その後、コンタクトのためのフォームを含んだフッターを追加して、サイトを完成させます。

02.png
作成するユーザー一覧

 ユーザー一覧部分は、デザインデータを用意せず、HTMLとlessをいきなり書いて内容やレイアウトを調整してみます。3列横並びのレイアウトをするには、Bootstrapの写真などを並べたいときに使えるパーツ「components」が簡単です。

03.png
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の解説になってしまうので軽く流します。興味のある人は筆者が解説している動画をご覧いただけると理解しやすいと思います。

04.png
グリッドシステムについて筆者が解説しているサイト

デザインをすばやく仕上げる画像、文章のダミー

 Webデザインを進めていくとき、画像や文章のダミーを入れて完成イメージを作るときがあります。ダミーとはいえ、画像を探してリサイズしてWeb用に書き出すのは非常に手間がかかります。サンプル文章も「あああ」などの意味のない文字の羅列では、クライアントに見せるのもはばかられます。

■ダミー画像をラクに入れよう
 ダミー画像は、無料で提供されている写真を動的に表示してくれるWebサービスを利用して組み込みます。この記事では、カテゴリから写真を選択できる「lorempixel」を利用しました。背景や文字色、表示するテキストなどを設定して表示できる「Dynamic Dummy Image Generator」もあります。

■サンプル文章もラクに入れよう
 サンプル文章も「lorem ipusum(ロレム・イプサム)」と呼ばれる典型的なダミー文章を利用します。出版やグラフィックデザインなどでサンプルテキストとしてよく使われているものです。「lorem ipusum」や「lorem ipusum 日本語」と検索するとダミーテキストを生成してくれるサイトが見つかります。エディターによっては、ダミーテキストを入れるプラグインが用意されていることもあります。

06.png 07.png
lorempixel(左)、Dynamic Dummy Image Generator(右)のトップページ

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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

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