28デザインワ−クスのWebsite(ホームページ)をリニューアル

2019.12.09 Monday

0

    リニューアルされた28デザインワ−クスのWebsite(ホームページ)

     

    覚え書き的な投稿ですけど、先日、当店(28デザインワ−クス)の Website をリニューアルしました。

    6年ぶり?もっとかも?時々、文章や画像を追加していましたが。

    リニューアルと言っても、改修と言ったほうが適しているかもしれません。

     

    Website の現状

    当店の Website は 1999年に誕生しまして、リニューアルを繰り返してページを増やしたり、デザインが時代にマッチするようにしてきましたが、また調整する必要を感じていました。

    当店の場合は、デスクトップからのアクセスが多いものの、スマホやタブレットからのアクセスは増えました。

    これは SNS(Twitter・Facebook・Instagram)から訪問してる人が増えたと判断しています(時代の流れですね)。

     

    ということで、今回のリニューアルの主な目的は、スマホに完全対応させることでした。

    前回のリニューアルで、大ざっぱに対応させていましたが、時代が進んでスマホで見る人が増えてきたのと、スマホやタブレットの種類の多様化・傾向も分かってきたので、もっとシッカリ(完全に)対応させたほうが良いかなと判断しました。

    デスクトップモニターの大型化も影響ありますね。

     

    作業内容

    しかし、文章に使われている画像をどうしようか?問題だなぁ、大量に作り直すのは元気もないし面倒だなと思っていましたが、結局 1つも作ったり修正しませんでした。

    既存の画像(横幅が 480pxくらい)を最大 960px で表示させるようにしたので、大きな画面でみると雑ですが、ガマンしました(見るかたはガマンしてください)。

    今後、新規で作る際は横幅 960px で作っていきます(昔と比べると非常に大きいですね。ウィンドウサイズを 960pxくらいと想定して作っているときもありましたから)。

     

    短期間で終わらせたいのもあって、実際に行った作業はレイアウトの見直しのみで、広めの余白というか余裕を持った感じにしています。

    その CSSファイルは 3つ作りました。

    前回は 5つ使っていましたので、2つ減りましたよ。

     

    これにともない、すべての htmlファイルの修正とバックグラウンド画像の制作(2つだけ)をしました。

     

    バックグラウンド画像は、前回までの経験から『何が写っていたら良いのか・どういう雰囲気が良いのか』傾向は分かっています。

    前回は、カーボン系のページにはカーボンを使っていてテクニカルな感じということで、スペースシャトルの写真を使ったり、デザイン系のページには微笑ましい雰囲気ということで、少女の写真を使っていました。

     

    今回はリラックスできるような雰囲気のみにしました。ハードな感じや緊張感のあるものは選びませんでした。

    まぁ、特にデスクトップではハッキリ何の写真かは分からないかもしれませんが、ウィンドサイズによっては何だろ?って思われるような感じも狙っています。

    ボツにしましたが、飛んでる鳥が見えてきたり、月が見えてくる画像も作りました。

     

    今回のバックグラウンド画像の問題は、どんなサイズのモニターでも見苦しくないと感じる画像サイズなんです。

    制作したら、とても大きなサイズになりましたけど、皆さんどうしているんでしょうね?

    いろいろ調べてもコレといった答えは見つからなかったですが、無料ホームページ制作ツールを謳っている Wix は 3000×3000px のサイズをオススメしていました。

    Wix はパララックスやレスポンシブなサイトが多いと思うのですが、4Kモニター表示は多少雑になっても OK って判断でしょうかね?

     

    私の場合、4Kモニターを所有してますので、「このサイズでもそこそこ綺麗に見たいな」と思いまして、横幅は 3840px にしました。

    文章が多く下に長いページが多いので、『縦はなるべく長く』ということにしました。

    といっても、縦に長い画像ってなかなかな見つからないので、2枚の画像をつなげて 1枚にしました。

    ホントは継ぎ目なしの画像にしたいです。

     

    容量的には Webサービスの『COMPRESSOR.io』とフォトショップの『Web用に保存』を使って軽くしましたが、それでも理想としている 100KB以下にはなりませんでした。

    元々キレイで大きさな画像なので、しょうがないかな?

     

    元画像はライセンスが CC0(著作権フリーで改変 OK )なものを素材サイトから選んでいます。

    遊び心で、トップページにはデスクトップモニターならウィンドウサイズを小さくしたり(あるサイズで)、スマホなら特定の機種で、フッターの上にビキニ姿の女性がチラッと現れますよ。

    興味あるかたは試してみて。

     

    廃止したこと

    今回の作業で廃止したこともあります。

    Googleアナリティクスのトラッキングコードの設置(アクセス解析しなくなったんですよ。でも考え直すかも)。

    それと『上に戻るボタン』の設置(スマホやタブレットでは使わないという判断をしました)。

    あと、Facebook と Google+ のボタン表示も止めました(Facebook のいいね!ボタンは古い?もういらないかな?Google+ はサービス終了しちゃいましたもんね)。

     

    表示確認

    完成した Website の表示確認は、Google Chrome のデベロッパーツールと、所有している 2K と 4K のデスクトップモニター・タブレットで行いました。

    ブラウザは Chrome と Firefox を使いました。

    Microsoft系のはスルーです。

     

    あと、パフォーマンス確認ということで、Google の『PageSpeed Insights』『Think wiht Google』『モバイル フレンドリー テスト』にて表示速度や不具合をチェックしました。

    Think wiht Google はモバイル使用時の、3G と 4G での表示速度が分かりますよ。

     

    Mac や実際のスマホでは確認してないのが少し不安ですが、見るのに許せるレベルになったとして公開しましております。

    何か不具合を見つけたら教えて下さいね。

     

    → 28デザインワ−クスのWebsite(ホームページ)を見る

    コメント
    コメントする
    トラックバック
    この記事のトラックバックURL