Welcome to my blog

Although the world is full of suffering,
it is full of the overcoming of it.
- Helen Keller

17

「Yukiyanagi」WEBサイトリニューアル中/旧式のやり方が不便すぎる【2020年更新あり】

2020年1月27日追記しました。»該当部分へ飛ぶ

前々回の記事で「今のサイトをリニューアルしたい」と言及しました通り、現在只今、絶賛(?)リニューアル中でございます。
まだナビゲーションメニューは実装していないし、トップページしかないんですが、初っ端から見た目が大幅に変わってるので、ちょっとドヤ顔でお披露目したいと思います(笑)

ちょっと拙いですが、PC・タブレット・スマホそれぞれのプレビュー画像を用意しました。ページを表示しているデバイスやウィンドウのサイズによって画像が変わります。

現状のサイトはこうです↓(画像をスクロールしてみてください)

現状サイトプレビュー

それが最新版(未完成)ではこうなります。↓(画像をスクロールしてみてください。トップの画像は仮置きです)

最新版イメージ

会社でのやり方をパクったところもありますが、BootstrapとSassを使ってコーディングしています。
本当はしっかりデザインも作成してからやるべきだったんですが、コーディングやりたくてうずうずしていたので、ざっくりワイヤーフレーム考えただけでいきなりコーディングに入っちゃいました。
(※実際の案件ではこういうやり方は最悪です)

■ 全画面表示の爆増

一目見ていただいて何が違うかお分かりになるかと思いますが、全画面レイアウトが爆増しています。
現状のサイトでは、まあトップページ上部は頑張って幅100%ぐらいにしてますが、高さが中途半端ですね。しかも、それ以外は背景白でこじんまりと収まっています。今はスマホからアクセスする人が多いとはいえ、PCからアクセスする人も普通に多いです。昨今の大型スクリーンで見たらかなり地味な感じになると思います。異世界の雄大な世界観を表現するにはちょっとインパクトが弱すぎるレイアウトだと思うんですよ。

というわけで大型スクリーンでもタブレットでもスマホでも雄大な世界観の表現を維持するべく、全画面レイアウトをやりまくってみました。
……というのは口実で、本当は、今までわからなかったから避けてたものを今回身につけたからやってみた、ってところなんです。
画面高さいっぱいに要素を広げるのがわからなかったんです。(ただ単に「height:100vh;」使えば良いだけ)

■ パララックスに苦戦

iOS対応しないとかw

地味に苦労したのがパララックス効果の実装。PC表示だけなら「background-size:cover;」と「background-attachment:fixed;」を併用できるはずが、iOSではできず、代替策を探すのに一苦労。
疑似要素を用意して、それを「position:fixed;」にすると良いというけれど、複数の背景をパララックスしたいときには向きません。 探し回った挙句、下記のリンクのものがわかりやすかったのですが、背景画像の上下に謎の余白が発生したり、思うように背景画像が配置できなかったり、そもそもの説明で書かれているコードが実際のデモと違ってたりして、ちょっと難がありました。しかも、スマホやタブレット含めSafariでスクロールする時、なぁんか背景がちょっとピクピクします。これらの不具合はデモサイトでも同じです。
>> プラグイン不要の基本的なパララックス効果をサイトに実装する

なのでトップのヒーローセクションと、世界観やキャラ紹介をしているセクションでは、上記のパララックスを使いつつも、自己紹介のセクションだけはCSSのみで疑似要素の背景を固定したやり方を取ることにしました。背景全体が固定されるので、ついでに概要セクションのところも背景を半透明にして固定した背景画像が見えるようにしました。結果としてめちゃくちゃ華やかになりましたけど(笑)

↑もちろん、こんな行き当たりばったりなやり方は仕事では絶対やってはいけません。今回の件はあくまで自分の腕試し、及び勉強や遊びの場だと考えています。

■ Sassを使って、マウスオーバーも華やかに

Sassの便利なところはHTMLみたいに入れ子構造でスタイルを書き込めることです。だから、マウスオーバーしたとき複数のスタイルの指定をすることが容易になります。今まではただ文字の色を変えたり、下線をつけたり、画像をややふわっと拡大させたりと割と地味なものでした。また、このブログのテンプレートを作った方がちょっと厳しいこと言ってて、スマホやタブレットでタップしたときマウスオーバーイベントがあるとウザいことがある、みたいなことを言ってたこともあったので、その影響でちょっと控えめになっていたところがありました。
でも、それはただタブレットやスマホサイズの時にマウスオーバーイベントを設定しなければ良いだけのことで、それ以上のサイズの時は大抵の人はパソコンを見てるんだから堂々と付ければいいじゃん、と思いました。(というか、実際の案件でパソコンサイズではガンガンつけろと言われたし)

CSS(Sass)でギャラリーページのリンクを盛ってみる

私は以前から「NxWorld」というブログで、webデザインに関する情報を得ているのですが、そこでちょっとおしゃれなCSSアニメーションをみつけました。画像をマウスオーバーすると、その後ろから複数の画像が顔を出すというもの、この先に写真集や画像集がありますよというアピールに使えます。
>> イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプル
これを参考にし、パソコンサイズではマウスオーバーで画像が複数顔を出し、タブレット以下ではマウスオーバーをやめる代わりに最初から複数枚の画像を重ねたまま出す、というようにしてみました。

「最初から複数枚並べたPNG画像でも作れば良くない?」という声もありそうですが、無駄に画像データ増えるだけだし、あまりスマートじゃないですよね?リアルと同じように重ねてずらすというレイアウトをCSSに任せた方がいいと思うんですよ。
しかも今回からRetinaディスプレイ対応をしているので、PNGで2倍サイズとか作ったらどれだけ容量が大きくなることか!

PC表示、マウスオーバーしたとき
PC表示、マウスホバー時
タブレットサイズのとき
タブレットの時
スマホサイズの時
スマホの時

■ DreamweaverはSassやJavaScriptのコーディングに向いてない気がする

私は今の会社に入社する前までは、ずっとコーディングはDreamweaverを使ってきました。職業訓練でもこのソフトでコーディングするよう覚えたし、5年前バイトしてたクソデザイン会社でもDreamweaverでした。そして、いつも普通のCSSでコーディングしてきました。

ところが、今の会社に入ってからはこのソフトは使っていません。システム系の会社であるからか、使い勝手が悪いようです。その代わり、PhpStormというソフトを使っています。
最初は戸惑いしかありませんでしたが、このSassを使ったコーディングに慣れてくると、Dreamweaverが不便であると感じるようになってきました。

その一番大きいところが、補完機能が弱いことです。例えばメディアクエリについて、スマホサイズ以下でのデザインを指定したいとき、従来のCSSでは「@media only screen and (max-width:520px) {}」と記述し、その中にスタイルを書き込んでいくものでした。それが今はBootstrapのSassのmixin経由なので、要素やクラスごとに「@include media-breakpoint-down(sm) {}」と書いて記述することが出来ます。前者より後者のほうが圧倒的に楽なんですが、DreamweaverはこのBootstrapのメディアクエリの記述の補完をしてくれません。これでは入力ミスをしてスタイルが適用されない、という事故が多発してしまいます。また、SassだけでなくJavaScript(jQuery)の補完もされません。これはコーディングする際とても大きな問題です。だから、仕事で使うソフトを自分用に買いました。(月額税込¥1,133で‬)

また、Sassのファイルはそのままではスタイルが適用されないので、CSSに変換(コンパイル)する必要があります。Dreamweaverにもコンパイルする機能はあるものの、複数の分割(パーシャル)ファイルをまとめてコンパイルすることができないようです。こういう場合はコンパイル専用のソフトウェアを使うしかありません。仕事で使ってるコンパイルソフトがmacしか使えない物なので、自宅では無料版でWindowsでも使えるソフトを使っています。

もちろん、Dreamweaverにあるテンプレート機能はPhpStromにはないし、会社で複雑に管理しているサーバー云々はさっぱりなのでアップロードするときはDreamweaverに頼ります。

詳しいことはまだまだ勉強中ですが、Dreamweaverは手軽にコーディングからアップロードまでできるソフトであるのに対し、PhpStormはより専門的に、細かいシステマチックな分業に向いてるソフトなのかなと思います。

【追記】もっと格安でもっと良い方法があった

会社の人からのアドバイスで、Phpを構築しないのならWebStormを使った方が良いとのことでした。うん確かに、PhpStormより格段に安い。また、Dreamweaverみたいなテンプレートを作りたいならPugを使うと良いよと言われました。CSSでいうSassに相当するもので、Sassと同じくコンパイルする必要がありますが、今私が使っているSassのコンパイルソフトでできるみたいです。

PugでHTMLコーディングを効率化・メリットと使い方を知る | Qookie Tech
SassやPugを楽にコンパイルするならPreprosでOK | YE-TECH(イエテック)