kigoulab コンテンツファーストとはモバイルファーストをさらに推し進めて、デザインやコーディングの前にコンテンツを用意し、それにあわせてデザインやコーディングを行っていく手法のことを言いますが、弊社では、かねてから画面要素や構成、コンテンツの内容などを、まずはテキストだけで整理してから、ワイヤーフレームなどを制作し、この整理したテキストを「字コンテ」と名付けていました。さまざまな業界で使われているこの言葉、確たる定義はないのですが、弊社流の字コンテをご紹介したいと思います。
シンプルに、素早く
弊社の字コンテは、以前は、なんちゃってreStructuredText(reST)に、独自のルールを加えたものを使っていました。現在は、なんちゃってMarkdownを基本に、独自ルールをくわえて書いています。
たとえば、#はMarkdownでは見出しですが、状況によってはコメントとしても使ったりします。その時々でルールが変わるのが、弊社流です。ようはプレーンテキストで伝わればよいわけです。プレーンテキストを使うのは、それが一番早くコンテンツを書くことができ、思考の流れを妨げないからです。
たとえば、このサイトのホームページを字コンテでかいてみたらどうなるでしょう。
www.kigoulab.co.jpの字コンテ
#SiteID
Kigoulab
情報伝達の設計と意匠
#グローバルナビ
ホーム｜ブログ｜キゴウラボとは｜サービス紹介｜事例紹介｜お問い合わせ
#ビルボード
Kigoulab
情報伝達の設計と意匠
#ピックアップコンテンツ
サイト設計と
CMS構築→
オウンドメディアや
広報誌の編集→
アプリとウェブの
UIデザイン→
#左カラム
Updates
#InformationとBlogの新着10件表示
Blog 2016年12月 8日 情報を分類する５つの帽子掛け
Blog 2016年12月 8日 なぜオウンドメディアにアメブロを使ってはいけないのか
#以下省略
#InformationとBlogのインジケーターをクリックするとそれぞれの一覧へ遷移するようにする
#右カラム
Tweets
#Twitterのタイムラインを表示
#Facebookグループのいいねボックスを表示
#Sitemap
#フッタサイトマップ
#内容は省略
#コピーライト
Copyright (C) 2016 Kigoulab Inc. All Rights Reserved.
–ここまで–
あえて、本文のないホームの字コンテを描いてみましたが、いかがでしょうか。機能が入るところはコメントで記載して、どのような機能がはいるのかを記載します。
ワイヤーフレームのない段階に、レイアウトを意識して各コンテンツを整理するのは、なかなか難しいですが、この字コンテを参考に、ワイヤーフレームを作成していくことになります。場合によっては、これをもとにコーディングのひな形を作ることもあります。まさにコンテンツファーストです。
字コンテを書くときに注意すること
とにかく素早く書く
頭の中で考えている構想を、素早く形にするのが目的ですから、少々の未確定点は、未確定とそのまま書いておき、とにかく素早く書くことに専念します。記法のルールも厳密に守る必要はありません。コンテンツにあわせて書きやすいように変えてしまっても伝われば問題ありません。
要素に名前をつけて書く
上の字コンテにも、SiteIDとかビルボードといった聞き慣れない言葉がありますが、これはすべて社内で使っているページ要素の名称です。SiteIDは左上のロゴようなコーポレートロゴのこと、ビルボードはトップページのメインビジュアルのことですが、このような名称を付けておかないと、なにについて書いているのかが分からなくなります。正式な呼び名がわかればそれに越したことはないですが、ここは日本ですので、分からないものは勝手に名称をつけて分かるようにしましょう。
レイアウトを意識して書く
ワイヤーフレームに起こしやすいように、レイアウトを意識して書くようにします。少なくとも、メインカラムの要素か、サブカラムの要素かはわかるようにしましょう。
まとめ
今回は、サイトの構成やコンテンツを素早くまとめる方法、「字コンテ」を紹介しました。ポイントは、細かなルールにとらわれず、脳のなかの考えを素早く形にすること。そのためのプレーンテキストです。うまくいけば、コンテンツファーストなサイト作りができるかもしれません。一度試してみて下さい。
（担当：小山智久）