［CSS］ 背景画像（パターン）は固定にしてみる。という視点もあるよ

デザインなんつー言葉は実に曖昧で、とどのつまりが趣味趣向ってことになっちゃうわけですが、趣味趣向も言葉できっちり表現できて理屈を装備させられれば多少なりとも戦うときに役に立つでしょう。

デザインという言葉を使う場合の私自身の着地点は「問題解決」です。案件毎に抱える問題を解決できて、デザインできたなぁと感じます。

今回は、背景にテクスチャを引いてサイトの見た目に花を添えるときの考え方として、デザインするときの自分の考え方を書きます。

固定にしてみる。という視点もあるよ

ざっくりした例で（わざわざCodePenつかっちゃって）恐縮ですけど

See the Pen mydLRg by shintarowfresh (@shintarowfresh) on CodePen.

See the Pen zxYjZP by shintarowfresh (@shintarowfresh) on CodePen.

明確な違いがあると、自分は考えてます。

コードで言えば違いはCSS一行なんですけど、まあまあドラマチックなほどの違いがあると思います。例のために極端にしていることも事実ですが考え方の参考として。

ね、背景が動くと気持ち悪いでしょ？

と、言いたいわけではありません。気持ち悪いと感じない人だっているわけです。むしろ背景が動かないことが気持ち悪いと感じる人もいるでしょう。

そして、背景を固定させることができることを知らない人もいるわけです。知っている上で動くことを許可させている人もいます。

「選択された結果」に対して文句をいう場合はもう趣味趣向です。

自分だったら「へえ、知らなかった」もしくは「勝手にさせてくれ」で終わりだし。仕事上の実装ならどちらのメリット・デメリットも説明した上で「選択」してもらうでしょう。

私の場合は「固定」します

理由は動くと気が散るからです。

テキストがメインのブログだったら固定します。他にもテキストメインのサイトなら固定しちゃいます。

ブロネク！ハングアウトでお前に会いたい！「Blogger Next Door」

↑固定してる例。

どうして気が散るかというと、人間の目は動くものを無意識に追いかけちゃうからです。さらには、理屈を抜いても「自分は気になるから」固定します。それほど自己主張しない質感の背景だったとしても、動くと気になります。

それほど気にしてほしくない部分が気になることは作り手と使い手双方の不利益になると考えるので、固定させます。

サイドバー領域のコンテンツを固定する賛否もあるでしょうが、同じ理由で当ブログは固定を選択します。（サイドバー固定の話をするととりとめがなくなる都合で今回は省略）

背景を固定する際のデメリットとしては、

• なんとなく地味になる
• スクロール感が失われる
• いや、動けよと思われる

といったところでしょうか。

デザイン全般に統一感を持たせて、背景画像にだってこだわって作られたサイトは多くあります。スクロールされた際にコンテンツ部分と背景がずれることで、むしろ違和感を生んでしまうデザインもあるでしょう。その際は背景画像を固定することのデメリットが固定しない場合よりも明らかなので、動かす選択をするでしょう。

スクロール感がなくなることについても、メインの部分はマウスホイールに連動するし、ブラウザの端には（スマホであっても）スクロールバーが表示されるので、よほどネット経験がない場合以外は問題にならないと考えています。

当然、ネット経験が著しく低い方が対象の場合は「スクロール感がなくなること」は閲覧者の不利益になるので、背景画像を固定することは避けたほうが無難です。背景画像をなくす選択も考えられます。

背景画像は固定にしたり、パララックスさせるって手もあるよ

いきなりパララックスとか言われても耳馴染みがないかもしれませんが、「固定」か「固定しない」かの2択以外にも選択肢があることを知っておいて下さい。

See the Pen Parallax scrolling background by Sander (@skeurentjes) on CodePen.

ざっくりと言えば背景画像だけゆっくり動かせています。（背景画像にとどまらず、スクロールに合わせて早くしたり、横に動かしたりと使い方の幅はあるよね。）

上に書いた動く場合のデメリットである「気が散る」をあまり感じさせないようにしつつ、背景も魅せることを可能にしています。

実装者の自己満足や技術のひけらかし以上の利があると考えます。

まあ今度は「どの程度・どのように」パララックスさせるか？って選択肢が登場するわけですけども。

締め

背景画像は固定（もしくはパララックス）しちゃった方がいいんじゃない？と主張していますが、CSSのプロパティーである「background-attachment」のデフォルト（特に指示しない場合の値）は「scroll」です。

デフォルト値が「scroll」であることも念頭に置きつつ「選択」していかなければ頭でっかちになるなぁと考える次第です。

ケースバイケースは大前提ではありますが、世の中には背景が動くかどうかが気になる人もいるという視点として。では。

文：シンタロヲフレッシュ

はてブ

pocket

twitter