COLUMN コラム

2018年8月10日構築

市島

Sitecoreで実装漏れを防ぐ!デザインで想定しておくべきポイント

高機能と使いやすさを両立させたコンテンツ管理機能が充実しているSitecore、多機能だからこそデザインする側は考慮しなくてはいけないポイントがたくさんあります。 構築が進んだタイミングで実装漏れが発覚すると全体の設計に影響を及ぼす可能性も否定出来ません。 LYZONではデザインからコーディングまでを一貫してデザイナーが行っているため、Sitecoreで実装しやすいコーディングを頭で描きながらデザインしています。 デザイナーの実体験に基づいた、つい見落としがちなデザインポイントをまとめてみました!

01.
mediaにアップする
画像は1枚?
コンテンツのメイン画像と
サムネイルの使いまわし

Sitecoreの大きな利点として、下層のページからタイトルや画像を取得(データソースを取得)して、上層ページに一覧表示出来る機能があります。
もちろん、下層ページのメイン画像と上層ページサムネイル画像はmediaにアップした同じ画像を使いまわせます。
その際画像をどのようにトリミングするか、それをコーディングでどう実現するか想定しながらデザインする事が必要です。対応ブラウザにもよりますが、object-fitを使って画像をトリミングするとCSSだけでトリミングが解決出来ます。

mediaにアップする画像は1枚?コンテンツのメイン画像とサムネイルの使いまわし

02.
SEO効果も考える!
見落としがちな
タイトルの文字数制限

流行のデザインを取り入れたり新しいデザインにチャレンジするのは大事ですが、そのせいでタイトルや文章が読みづらくなってしまっては元も子もありません。
特にh要素に入るページタイトルや見出しはSEOの観点からも重要で、タイトルが収まりきらないようなデザインは避けなくてはいけません。そのためには、事前にサイトマップを確認しタイトルの最長文字数を確認してからデザインに取りかかるのも有効的です。
また、どうしても入りきらない場合はjavascriptで表示文字数に制限をかけ、末尾を三点リーダーで処理する方法もあります。

SEO効果も考える!見落としがちなタイトルの文字数制限

03.
長いテキストが入る時の
デザイン

テンプレートのデザイン・コーディングは、ダミー画像やダミーテキストで制作しています。そのため、いざサイト構築という段階になって、デザインカンプではテキストがきれいに収まってる箇所へもっと長い文章が入る場合があります。
最初のデザイン制作時に、どのような長さの文章が入ってもきれいに収まるようなデザイン・コーディングを想定しておくことが大事です。デザイナーとマークアップエンジニアが分業の場合はデザイナーと意図を共有しておきましょう。

長いテキストが入る時のデザイン

04.
レイアウトは
レスポンシブの
挙動を想定してデザインする

画像とテキストが横並びなど、要素同士を横並びにするレイアウトはよくあるデザインです。
その際、リキッドレイアウトでブラウザ幅が変化した時の要素幅の関係性まで想定してデザインしておくことが大事です。画像幅がピクセル固定でテキスト幅が可変、画像幅もテキスト幅も%指定など、想定しておかないといざサイト構築の段階になってテキスト幅だけやけに狭いなどバランスがおかしくなってしまうことがあります。
Sitecore実装後にコーディングのし直しという事態にならないようにしましょう。

レイアウトはレスポンシブの挙動を想定してデザインする

05.
その要素、
MAX何個入る想定?

従来の記事カテゴリーの他に記事へのタグ付けが当たり前になってきた昨今、タグが入ってるデザインをする事も多くなってきました。
ですが、タグに入るテキストの長さや、タグが最高でいくつまで表示されるか考えずにデザインしていませんか?特に見落としがちですが、グローバル対応するサイト構築では、日本語から英語になった時の文字数は全然違います。
制作中にデザインに繰り返し使用する要素がある場合は、MAX何個入るのか想定しながらのデザインが必要になります。あわせて、要素が複数行になる場合の折り返しデザインも忘れないようにしましょう。

その要素、MAX何個入る想定?

06.
その要素、
トルツメになった時の
デザインは?

Sitecoreでのテンプレート構築の際、指定の要素がない場合はブロックごとトルツメしたり、意図的にそのページだけ指定のブロック(アイテム)を非表示することが出来ます。
LYZONではそのような構築時の決まり事を画面設計書というドキュメントにまとめ、デザイナーも画面設計書を見ながらコーディングしていきます。要素がトルツメになった場合でも最適なmarginをデザイン・コーディングしています。

その要素、トルツメになった時のデザインは?

07.
どのテンプレートでも
使える
ページネーションデザインを

ページネーションのデザインを1パターンしか制作していないと、テンプレートによっては崩れの原因となります。
ページネーションが入るすべてのテンプレート、レスポンシブ対応も含めしっかりとレイアウトを確認しましょう。
Sitecoreでは、Aテンプレートはページネーションは10ページ目まで表示、Bテンプレートは5ページ目まで表示、スマートフォンでは5ページ目まで表示等設定が出来ますが、あらかじめエンジニアと連携しておくことで、後のトラブルを防ぐことが出来ます。

どのテンプレートでも使えるページネーションデザインを

08.
ボタンサイズは
可変サイズか、固定サイズか

Sirecoreに限った話ではありませんが、サイトにおいてボタンは重要なパーツです。
大規模サイト構築を得意としているSitecoreでは、サイト内にいくつものボタンを配置することが多く、LYZONのデザイナーはどのような文字数でもどのような配置でも美しく存在感のあるボタンデザインが設置できるようデザインパターンを準備しています。
最低限でも、ボタン幅固定のデザインとボタン幅成り行きのデザインを用意しておくことが必要です。ボタンのpaddingのルールを先に作るのも効果的です。

ボタンサイズは可変サイズか、固定サイズか

09.
フォームの
バリデーションは
事前にモジュールの確認を

Sitecoreでフォームを構築する際、フォームのモジュールはSitecoreのバージョンに依存します。
WFFM(Web Forms For Marketers)やSitecore Formsなど、使用するモジュールによって吐き出されるhtmlが変わってきます。入力必須項目の「*」の位置、バリデーションの位置も変わってくるため、出来ればモジュールとhtmlの確認をしてからデザインするのが理想です。
コーディング調整だけで実現出来ないデザインをしてしまうと、エンジニアに負担がかかることになります。

フォームのバリデーションは事前にモジュールの確認を

関連リンク

お問い合わせ・資料請求

LYZONにご相談下さい

ご依頼ご質問等まずは私達にお気軽にご相談下さい。

お電話でのお問い合わせ

03-5803-0587平日9:00~18:00