見出し画像

ホームページの改善に取り組む

デザイン改善


会社ホームページ、サービスサイトにひと通り情報の入力ができました。改めて他社のものと比較してみました。内容は悪くないと思うのですがデザインがさみしいです。以前外注も検討したのですが相談止まりになったいました。この際だから自身でできるところまでやってみようと「swell デザイン ◯◯」で調べてみました。使っていなかった機能がたくさんあり色々と試してみました。

セクション見出しブロックでswell装飾>注釈を付け見出し下に英字を入れさらに基本設定でその下に下線を引きました。フルワイドブロックで背景に画像を設定しオーバーレイでそれを薄くしさらに動きをつける設定をしました。細かいところではクリックしても画像が拡大表示されないようにしたり、記事部分は背景に方眼入れ文字が揃って見えるようにしたりました。
色々とやってみたら気に入ったデザインになったのでこれで芝生のサービスサイトブートキャンプのLINEグループで報告しました。

表示速度改善


デザインも大切ですが表示速度も重要です。私がせっかちなのもありますが開いてすぐに画面いっぱいに画像が表示されてどこをタップしてもコンテンツが見れないサイトはすぐに閉じてしまいます。特にスマホで多い気がします。そういうせっかち対策にも開いてすぐに全てが表示されるようにしたいです。対応としていちばん簡単なのが画像圧縮です。改めて全ての画像のサイズを確認、見映えを維持できる最小サイズまで圧縮し直しました。

画像は営業前で自身の素材が少ないです。商用フリーの写真素材サービス写真ACにプレミアム会員登録してそこからダウンロードしました。ほとんどが最小のSサイズで足り4:3の比率なのでそのままで使えます。さらに以前ココナラで相談した際に教えてもらったTinyJPGというツールで8割程度圧縮できます。これでほぼ全てのページで開いてすぐに表示されるようになりました!