山梨県のホームページ制作Y-DESIGNER

BiNDでのホームページ制作に役立つ情報をお届けしています。

BiNDでホームページを制作する時に気をつけたいこと。

 

こんばんは。山梨県でホームページの制作をしているY-DESIGNERの須山です。

今回はBiNDでホームページを制作する際に私が個人的に気をつけていることを簡単に紹介していきたいと思います。皆様のサイト制作の参考になれば幸いです。

 どのデバイスでも表示最適化するために気をつけること。

正直全ては無理ですが現在のBiNDで制作をする上でもっとも気をつけたいのがタブレットでの表示です。BiNDのテンプレートはオシャレなものが多いですがタブレットで見たときは結構ひどいです。

実際解析ツールで見ているとタブレットでサイトを見ているユーザーさんは少ないので面倒であれば割り切るのもアリだと思いますがBiNDを選んだ理由はキレイなホームページを自分で作りたいって人が多いと思いますのでぜひこだわって見てください。

現在私が制作中のサイトと似ているテンプレートで比較します。

重ねる・ずらすのテンプレートは要注意。

今回のBiNDupで追加されたテンプレートです。こちら。

f:id:y-designer:20181020034701p:plain

パソコンでの表示は抜群にかっこいいこちらのテンプレート。今回増えたテンプレートの中で一番好きです。ただ、スマホ表示とパソコン表示のギリギリの境目での表示を見るとこんな感じ。

f:id:y-designer:20181020035234p:plain

はい、こんな感じ。写真で文字が隠れたり、上の見出し部分のtだけ落ちたりしてます。

このテンプレートに限らず、BiNDのテンプレートでタブレット表示の崩れは多数出ます。

で、私が制作しているのはこちら。まずはPC表示

f:id:y-designer:20181020035427p:plain

ファーストビューのところではないですが写真の上に文字とか重ねたりしてます。

スマホ表示とパソコン表示のギリギリの境目でみるとこんな感じ。

f:id:y-designer:20181020035605p:plain

写真の縦横比は変わりますがレイアウト崩れはないと思います。ちなみにこちらの表示は全てCSSの詳細設定だけで表現可能です。わざわざDRESSを使う必要はありません。widthとmarginをうまく活用すればこれくらいは可能です。

段組は2段まで!

よく横に写真3枚並べたりして配置してその下にテキストとか入れたりしますよね。テキストが長ければ長いほど気になります。こちら。

f:id:y-designer:20181020035220p:plain

はい、短い文章でもガタガタです。現状のBiNDで3段組はこういった表示になる可能性があります。2段組だとこんな感じ。

f:id:y-designer:20181020040134p:plain

まだテキストの量も一緒なのでキレイに揃っています。そのことを差し引きしてもさっきよりはマシでしょう。2段組をすることを考えて写真の縦横比も気をつけています。

背景固定は使わない!

CSS詳細設定に追加された頃は嬉しくて使っていたbackground-attachment: fixed;。

背景画像が固定されるのでスクロールすると素敵な動きをしてくれます。Y-DESIGNERの現在のサイトのPC表示がそれです。

ただし、こちらタブレットでは機能しません。当然スマホでもダメです。javascriptとかでどうにかできるかもしれませんがBiNDの従来の機能だけではなんともなりません。

またタブレット表示は基本的にメニュー部分以外はPC表示の情報を引き継ぎますのでbackground-attachment: fixed;をPC表示で設定しているとタブレットで見たときに背景がすごいことになります。

背景動画もあまりオススメしません。

BiNDで背景動画が表示されるのはPC表示だけです。タブレット・スマホは非対応ですのでご注意ください。当然タブレット表示はPC表示の情報を引き継ぎますのでご想像の通りです。

BiNDのオススメのテンプレートの選び方

ここまででBiNDでのタブレット問題はある程度理解いただけたかと思います。

基本的に私、テンプレートは使っておりませんがタブレット表示も気にする方々は以下のことに気をつけてテンプレートをお選びいただければと思います。

サイドバーのあるテンプレートは避ける

上記のような表示崩れの原因になります。両サイドにサイドバーがあるテンプレートとかは論外です。

例えばこの辺のテンプレート

index of YAMANO kimono school [Enji]

トップぺージ of NAKAMEGURO [Navy]

横幅100%にコンテンツが広がるのも避ける

インパクトのあるホームページを作りたい時にぜひ活用したいテンプレートですが、641pxから上限なく表示されますのでタブレットのことに気を使ったサイトなんて作れないです。BiND8が出た時は1200pxとか1400pxの横幅サイトとか作りましたが今は960px以上にはしないようにしています。その方がデザインしやすいです。

例えばこの辺のテンプレート

HOME of Bar & Dining No.8 [Black]

ファーストビューだけですがこちらも

TOP of TOMMY Yoga Studio / Bluegray

私個人のオススメテンプレート

テンプレートは使いませんがあえてオススメするなら、BiNDupになって追加されたテンプレート7つです。インパクトのあるサイトを作りたいならAZUMAあたりは良いテンプレートだと思います。

あとは2段組以上にしない、テンプレートに3段組以上があったら2段組に変える。

写真だけのコンテンツエリアなら3段組以上でもOKだと思います!

まとめ

2018年10月現在でBiNDupのブレイクポイントは640px付近の1箇所だけです。本来タブレット表示を基準にサイト制作なんてないと思いますがBiNDでサイト制作をする上で個人的にはぜひ気をつけていただきたいポイントです。

ここまで色々と書きましたがY-DESIGNERのサイトは色々できておりません。。。

この一年で勉強させていただきました。

ってかブレイクポイントをデジタルステージが増やしてくれればいいんですけどね。Live2の時はタブレット表示も切り替えあったのに。。。

そんな感じです。

 

山梨県でホームページ制作・BiNDの制作代行ならY-DESINGER!

y-designer.com

 

 

(C)2017 Y-DESIGNER