こんにちは！LIGの新米デザイナー、ヴィクトリアです！
最近、メディアサイトのデザインに携われる機会がありました。その中で、私がデザインするのに学びの多かった「記事詳細ページ」について、おさらいしたいと思います！
目次
ページごとに異なる“注意すべき要素”
一般的なコーポレートサイトを作るときも、下層に着手する前にルールを決めると思いますが、メディアサイトでも、もちろんその必要があります。ページ数が多いので、ちゃんと決めておかないと、あとでぐちゃぐちゃになってしまいます。
デザインするページによって注意すべきポイントが変わってきますので、今回は記事詳細ページの要素についてまとめたいと思います！
記事詳細ページのヒント
本文テキスト
読みやすいコンテンツ幅はどのくらいか？横に長すぎると改行を見失って読みづらくなってしまうので一般的には800〜1000pxのサイトが多いと思います。Webページにおいて読みやすい文字の幅を考える必要があります。
横幅が長すぎると改行で文を見失ったりするので、サイドメニューを入れたり背景をつけたりして、違和感のないようにコンテンツ幅を縮めることが多いです。またインデントさせるかどうか？も考える必要があります。
あと、本文中に出てくるのがテキストリンクです。本文中にどう表示させられるかを考えて、デザインに一緒に入れます。
日付
日付の表記についてです。どの画面でどう表示させるか？例えば詳細ページで****年○月×日にしていて、記事の一覧ページで表示するときに、長くて入れづらくなったりします。
また、サイトの雰囲気や見にくるユーザーの層によっても、英語表記の方が雰囲気に合うとか…高齢の方も見にくるから分かりやすく漢字でとか…気配りしてあげたい場所であると思います。
見出し
投稿機能がある場合の話です。お客様の方で記事などの投稿をする場合、最初から使えるデザインを決めておく必要があります。まず見出しです。絶対に必要な要素です。何種類必要か？一般的にはh1-h2-h3-h4のように、段階分けがされると思います。
次にデザインです。ページのデザインに合わせることと、お客様がどのように使用することが考えられるか？想定してデザインを考えます。このとき、見出し自体のデザインと、要素の上下にあるマージンも考えます。
リスト
文中にリストを使用することはよくあります。その際、リストの[・]部分はデザインすることができます。色や大きさ、文字までの距離、リスト同士の間隔を調整します。
また数字のリストもあります。その際も、数字部分のフォントや見せ方などもデザインすることになります。
記事内画像
記事内で画像を表示させたい場合、どういう見え方になるかを考えます。右寄せや左寄せ、中央に表示させたり、選べるのもいい機能だと思います。
表の横組み・縦組み
わりと考えないといけないのが表です。ここではあえて「縦組み」と「横組み」を分けて考えます。なぜ分けるかというと、それぞれ用途によって動きが変わるからです。
横組みの場合、横に列が増えていくとき、スクロールをつけるのか？中身が改行されてセルが縦に伸びていくのか？など、どんな内容が入ってくるか、スマホの画面でどのように表示させたいか？を考えます。
SNSシェア
記事を外部のサービスでシェアをしてもらいたいときのリンクです。外部サービスで紹介してもらえると、自然と拡散されていくので、大事なリンクです。
どこに配置したら押してもらいやすいか？場所や大きさを考えます。また何のメディアで、どんなユーザーかを想定して、シェアに使われそうなSNSを選びます。
引用テキスト
どこか他のサイトで見た文章や、他の記事から使いたい文があった場合「このテキストは引用なんですよ」ということが分かりやすくなるようにデザインします。
その方が説得力が増したり、文中に強弱がついて、読みやすくなったりします。
人が喋るアイコン
インタビューなどがある場合はつけたいデザインです。その方が、誰が話してるか分かるし、読んでいて発言者の顔が分かるので、親しみやすさを感じます。
SNSからの引用
SNS上に投稿されている文章を、記事内に表示させたい場合のデザインです。各SNSによってデザインが違うので、それを再現します。
そこで、たとえばInstagramなどは「いいね！」の件数が必要なのか？とか、日付をつけるのか？などの判断をします。
ボタン
誘導したいリンクのときに活用されます。このボタンも、通常パターンと目立たせたいときとでデザインを分けると、より使い勝手がよくなると思います！
出展
文中で何か参考資料から引用したりすることがある場合は必要になります。普通のテキストだと本文との区別がつきにくいため、出展用の見せ方を考える必要があります。
外部リンクアイコン
外部サイトに遷移するとき「これを押したら別のページに行きますよ」ということが分かった方が親切だと思います。なので、アイコンをつけたり、表示の仕方を変えて見せ方を考えます。
この記事を書いた人
ブログの最後によく見かけるこちらの要素ですが、記事を書いた人がどんな人なのかをお伝えするのに必要な要素です。プロフィールをどこまで表示させるのがバランスがいいのか？など検討します。
タグ
タグをつけて分類分けします。ユーザーの方も関連した記事が読みやすくなるので、回遊率が上がったり、いろんな記事を見てもらいやすくなると思います。
タグのデザインを考える時、1つの記事にどのくらいタグがつくのかを考えて、アイコンにするのか？1つずつ装飾するのか？大きさや見栄えを考えていきます。
ページャー
記事にページャーをつける場合の話です。最近はついていないサイトの方が多い気がします…。忘れがちなのがカレントです。自分がどのページにいるのか分かるようにしてあげる必要があります。
そしてページャーの機能として一般的なのが、前後の記事へ移動するための[次へ][前へ]です。日本語なのか？英語なのか？ボタンにするか？アローをつけるか？など検討します。
あったら便利なのかなーと思うのが、[最新][最旧]に移動するボタンです。遡って見たい人や、探し物がある人には重宝するかもしれません。
最後に、一番ややこしい所の、今いるところから前後何件表示させるかを考えます。例えば5ページ分表示させていたら、6件目に増えたときにどんな見え方になるのか？ものすごく記事の量が増えたとき、何件分表示させるのか？など、ここはバックエンドの人やフロントエンドの人にも聞きながら考えました。
スマホのときとも見せ方が異なるので、どうなっているのが一番使い勝手がいいのか？などを考えながら一番いい形にデザインしたいものです。
まとめ
いかがでしたか？これから見習い中のデザイナーさんがメディア系のサイトをデザインすることになったとき、参考になったら嬉しいかぎりです！
私もまだまだ駆け出しの見習いデザイナーなので、間違っていることや足りない知識がたくさんあると思います。お気づきの点やご意見などは、お気軽にお問い合わせなどからコメントしていただければと思います。それではまた！
キャリアアップ
「Studio上野でWebクリエイターを目指す！」
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
