【SWELLマニュアル】2. サイト全体設定

それぞれの色はカラーピッカーで自由に指定できます。このとき初心者に気をつけてほしいことは「色を感覚で決めないこと」です。

「サイトのデザインがイケてない……」という場合のほとんどは配色がイケてない状態が多いです。もっともおすすめのやりかたは「プロの配色をまねること」です。

SANKOU!のようなWEBデザインの参考サイトを開き、「これがいけてる」と感じたサイトの配色をまねてください。このときGoogle Chromeのアドオン『ColorPick Eyedropper』があると非常に便利です。

WEB色見本原色大辞典のようなサイトを参考にするなど、とにかく「自分のセンスで決めない」ようにすると失敗が少ないです。

デフォルト

デフォルトの状態ではヘッダーや画像の周りにうっすらとシャドウが入っていて立体感があります。また、アイキャッチ画像やその上のカテゴリー表記の背景は直角の四角形となっています。

全体をフラットにする

【全体をフラットにする】にチェックを入れるとシャドウが消えます。これは “フラットデザイン” といって、このフラットデザインを取り入れたiPhoneのiOS７がリリースされた2013年頃からWeb業界でも流行り始めたデザインになります。

全体に丸みをもたせる

【全体に丸みをもたせる】にチェックを入れると角が取れて全体的に丸みのあるデザインになります。

基本カラーの設定で背景を真っ白（#ffffff）にしている場合はわかりにくいので、サンプルでグレーにしてみました。

オフ

オン

オン（メインエリアのみ）

「コンテンツの背景を白にする」をオンにした場合、どのページに適用させるかも設定することができます。

さらに白背景を線で囲むこともできます。ただし、線はかなり細いので色つき背景の場合はほとんどわかりません。

コンテンツが何もないとわかりづらいのでトップページに「投稿リストブロック」を挿入しました。

今度は背景色を白にして、コンテンツも白に、さらに線で囲むといった設定にする場合に効果が見られます。「全部白だと境界線がなくてのっぺりに感じる」と思ったら設定してみてください。

フォントの設定をするときになにもブログ記事がないとわかりづらいです。すでに投稿した記事がある場合はその記事を開きながら、なにも投稿していない場合は、画像のようなサンプル文章でもいいので1記事投稿してみましょう。

余談も含めた話になりますが、前提の話としてすべての人に共通であなたが見ているデザインが表示されているわけではありません。

MacかWindowsか、iPhoneかAndoridか、使っているブラウザやそのバージョンなどの環境によって表示されるフォントは変わるんです。

游ゴシック

デフォルトの游ゴシックは多くのデバイスに搭載されているフォントですので、不特定多数の環境で同じように表示ができます。もっともオーソドックスでくせのない読みやすいフォントですので迷ったらこれでOKです。

ヒラギノゴシック ＞ メイリオ

2種類あるので不思議に思う人もいるかもしれませんが、簡単に言うなら「MacとiPhoneの人にはヒラギノゴシック、Windows PCとAndroidの人にはメイリオで表示」という設定です。

さきほどの游ゴシックはすべてのデバイスに搭載されていますが、こちらの「ヒラギノゴシック」はMacでは純正でインストールされていますが、Windowsでは購入しないと利用できない（しかも数万円する）フォントです。

つまりヒラギノゴシックの入っていないWindows PCのユーザーにはヒラギノゴシックで表示させられませんので、代替フォントで表示されます。このとき意図しないフォントで表示されるのを防ぐため「第一希望はヒラギノゴシック、ヒラギノゴシックの入っていないデバイスの場合は第二希望のメイリオで表示」という設定になります。

Noto Sans JP

パソコンやスマホで指定されたフォントがないなど表示のできない文字があるとき、□□□など文字の代わりに小さな四角が表示されますが、これを通称 “豆腐” と呼びます。このフォントは「すべての言語に対応したフォントを作る = 豆腐を表示させない = No 豆腐 = Noto」というコンセプトで生まれたフォントになります。

非常に美しく読みやすいフォントなのですが、このNoto Sansは「Webフォント」と言ってSWELLにインストールされているのではなく、インターネット上から読み込んで表示するフォントです。豆腐を表示させないためすべての言語に対応していることもあり、そのデータ量は膨大です。

つまり「大量のフォントデータを常に読み込む必要があるのでサイトの表示スピードが遅くなる」というデメリットがあります。サイトスピードはユーザビリティにも直結しますので、慎重に考えたいですね。

明朝体（Noto Serif JP）

唯一の明朝体のフォントです。こちらもNotoなので先ほどと同じくサイトスピードが遅くなるデメリットがあります。

また、印刷紙面での読みやすさを追求した明朝体は、Web媒体においては少し読みにくく、あまり推奨されません。「高級感」を演出できるといえば僕もそう思いますが、使うなら「見出し」などのスポットのみにとどめ、本文はゴシック体のほうがいいかなと思います。

旅館や和食屋のサイトなども同様です。もちろん「絶対ダメ」ではありませんのでお好みで使用してください。

表示させる文字サイズを設定できます。サイトのコンセプトやターゲットに合わせて設定しましょう。

カラムの幅にも気をつけ「一行で表示させる文字数」なんかにも注目したいところです。

• 極小
• 小
• 中
• 大
• 極大

モバイル（スマホ）での文字サイズを設定できます。パソコンと違って画面も小さく、一行で表示させられる文字数も違います。

「パソコンでは大きくしたいけど、スマホだと大きすぎる」といった場合に便利ですね。設定できるサイズは大きく2種類、「固定」と「可変」です。

固定の場合はどのデバイス、どの画面サイズでもスマホであれば同じ文字サイズで表示させますが、可変の場合は画面サイズに合わせて文字の大きさが変わります。

letter-spacingとは文字間の調整のこと

letter-spacingとは文字同士の間のスペースのことです。近すぎても遠すぎても読みづらくなりますので、フォントサイズと合わせて考えましょう。

文字間に余裕があるとやわらかで落ち着いたイメージなります。

上のコンテンツ幅が「サイト幅」です。デフォルトでは1,200pxに設定されています。

バナーなどの内部コンテンツを4つ以上並べたいなどある場合は1,200pxはほしいところです。単純にメディアサイトでしたら、あまり広いと逆に読みづらいので1,000 〜 1,100pxほどがいいかなと思います。

最近ではPCでもサイドバーをなくした1カラムのサイトがかなり増えました。スマホと同じような表示ができ、余計な情報を表示させず記事内容に集中させることが可能です。

このとき横幅が1,200pxもあると、一行の文字数が多くて読みづらいです。ですので記事幅を小さくすることで可読性を上げることができます。

ページの背景に画像を設定することができます。画像のように暗い背景を設定する場合は黒文字だと読みづらくなってしまいますので、基本カラーの設定で文字色を白にしたり、サイト全体の見た目の設定でコンテンツの背景を白にするなどして可読性を上げましょう。

また、背景画像を設定する場合はたくさんの設定項目があるのでお好みでデザインできます。

NO IMAGE画像とはアイキャッチ画像を設定していない記事があった場合に表示する画像のことです。画像サイズは「横幅1,600px以上を推奨」となっています。

本来アイキャッチだけでしたら800px程度で問題ないのですが、SWELLではタイトルの背景画像としてアイキャッチを画面の横幅いっぱいに表示する設定があるためです。小さい画像を横幅いっぱいにまで表示すると引き伸ばされて荒くなってしまいますからね。

また、MacのRetina Displayのような高解像度ディスプレイも同様に引き伸ばされて荒くなってしまうため、約2倍程度の画像サイズが推奨されています。サイトスピードを最大限上げたいなど画像を大きくしたくない場合もあるでしょうから状況に応じて設定してください。

サブコンテンツのタイトルとは、記事下の「この記事を書いた人」、「関連記事」、「コメント」のことです。また、メインコンテンツ内にウィジェットを挿入した場合のウィジェットタイトルもサブコンテンツとなります。

• 装飾なし
• 下線
• 左に縦線
• 左右に横線

サイドバーを表示する設定にしている場合、サイドバーのコンテンツのタイトルデザインを変更できます。

• 下線
• 左に縦線
• 左右に横線
• 塗り

サイドバーのタイトルはPCとスマホでデザインをわけることができます。スマホではサイドバーは表示されませんので、ページ下部の記事の下に表示されます。

フッターにウィジェットを配置している場合は、タイトルデザインの変更ができます。

• 装飾なし
• 下線
• 左右に横線

スマホで開くメニューのタイトルデザインを変更できます。

スクショを撮り忘れてしまっていて後から撮ったので、デザインがデフォルトから変更されてしまっています。ややこしくなってしまってすみませんが、色などは後で変更できますのでここでは「タイトル部分のみ」に集中してください。

• 下線
• 左に縦線
• 左右に横線
• 塗り

たとえばアイキャッチをYouTubeのサムネイルのような文字入りの画像を作成した場合、「タイトル上」に同じアイキャッチ画像が入ってしまうと見栄えが悪いです。

そこで文字などの入っていない別の画像をここで設定することで解消することができます。

画像を設定する場合はフィルターをかけることもできます。

• なし
• ブラー
• グレースケール
• ドット
• ブラシ

背景画像によってはタイトルなどの文字が読みにくい場合があります。フィルターをかけることで多少はよくなりますが、さらに上に色つきのフィルターをかけることで読みやすくできます。

サンプル画像では「ドット」の画像フィルターに真っ黒（#000000）のカラーオーバーレイを「0.3」の不透明度でかけた状態です。だいぶ可読性が上がりましたよね。

色も不透明度も自由に選択できます。

ホームページ設定で「ブログ」などのページを設定している場合は、そのページを間に入れることができます。コーポレートサイトなどでは表示させておきたいですね。

デフォルトではパンくずリストの背景はグレーで、立体感のあるシャドウが入っています（サイト全体の見た目の設定で「全体をフラットにする」にしている場合はシャドウは表示されません）。

背景効果をなくすと無地の白になります。

設定に迷ったら……

お好みで設定して大丈夫です。僕の好みは「チェックなし（背景効果あり）」です。

ただし、お知らせバーの設定でお知らせバーの表示位置を「ヘッダー下部に表示」を設定している場合は背景効果はなくなります。

カスタマイザー左下のスマホアイコンをクリック。

3本線のメニューアイコンは「ハンバーガーメニュー」と言います。

このメニューのデザインを設定できます。

デフォルトでは「MENU」になっています。サイト名やコンセプトに変更してもいいですね。

また、ウィジェットタイトルの設定でタイトルのデザインを変更することができます。

サブメニューの表示形式の設定で「サブメニューをアコーディオン化する」に設定するとサブメニューをクリック開閉式に変更できます。

• 四角形
• 円形

表示させる場合はアイコンの下にテキストを入れることも可能です。

• 四角形
• 円形

目次と同様にアイコンの下にテキストを入れられます。

メニュー開閉ボタンを表示する

固定フッターに「メニュー」が追加されます。スマホ開閉メニューで設定した上部のアイコンと同じメニューが開きます。

検索ボタンを表示する

固定フッターに「検索」が追加されます。

ページトップボタンを表示する

固定フッターに「トップへ」が追加されます。右下固定ボタンの設定で入れた右下のアイコンは消えます。

目次メニューを表示する

固定フッターに「目次」が追加されます。右下固定ボタンの設定で入れた右下のアイコンは消えます。

自動挿入される4つのメニューの名前を変更することができます。

固定メニューは背景の色や不透明度、文字色を変更することも可能です。

SWELLで使用できるアイコンは公式サイトの「SWELLで使えるアイコンの一覧」をご確認ください。

【説明】の欄がない場合は

ページ上部の【表示オプション】→【説明】にチェック

【カスタムリンク】で【URL】に

tel:半角ハイフンなしで電話番号

と入力します。リンク文字列は【TEL】や【電話】と入力します。

スマホ用固定フッターメニューにアイコンを入れる方法と同じくアイコンを挿入します。