目に訴えてみる

今週から、SSK Worldの新デザインをテスト中です。これまで何度かデザインをリニューアルしてきたSSK Worldですが、単に見た目を変えたかっただけではなくて、何らかの新技術を投入しようとするときに、デザインが変わっていく…という流れになっています。前回の全面リニューアルのときには、Movable TypeからWordPressに乗り換えたんですよね。

そんな中でも、今回は「見た目を変えてみたい」というモチベーションが結構高いリニューアルでした。ポイントの一つは、大きな画像を見せるスタイル。サムネイルではなく、画面の広い範囲を占める写真で記事をマーキングする形を巷のWebサイトで見かけて、これをちょっと真似してみたいと思ったんです。Web媒体というよりは、紙の雑誌に近いアプローチかも知れません。

全画面に写真が

似たようなWordPressのテンプレートを探し、今回は「Publication」というテンプレートを使ってみることにしました。WordPressのクラウドサービスであるWordPress.comを提供するAutomattic社が作ったものです。PCやタブレットでトップページを開くと、最新記事のアイキャッチ画像(記事に登録する代表画像)が全画面で表示され、画面内のリンクをクリックすると記事に飛びます。個別記事の最上段も同様のイメージです。

スクロールさせると…

そこからスクロールダウンすると、以前の記事一覧が並び、右側にウィジェットが並ぶ構成になっています。リンクの色をスタイルシートで変更したら、これまでとよく似た配色に仕上がりました。

スマホ版のデザイン

縦長画面のスマートフォンでは、さすがに写真サイズとの関係で全画面表示とは行きませんが、レスポンシブデザインでPC版のイメージを受け継いでくれます。ちなみに、アイキャッチ写真がない場合はシンプルなサイトロゴのみの表示。これはこれでいい感じです。


もうひとつこだわってみたのが表示フォント。上の画面キャプチャーをよく見ていただくと、PC版とスマホ版の画面で全く同じフォントが使われているのに気がついていただけるでしょうか。

SSK WorldのWebサーバーを借りているさくらインターネットでは、Webフォントサービス「TypeSquare」の和文30書体を、ページビュー制限付きではあるものの無償で利用できます。Webフォントとは、その名のとおりWeb上からフォントデータを読み込んで文字を表示するもの。デバイスに依存せず、同じフォントを表示できるようになります。もっとも、その代わりにデータ量が増えてしまうというデメリットもあるわけですが。

SSK Worldのサイトロゴに使っているフォントは、Googleが提供しているWebフォントです。こちらは無料で利用できて、欧文フォントのバリエーションが豊富なのが特徴になります。


いろんなデバイスで試してみましたが

見た目にこだわったかっこいいサイトを作ろうとすると、動作が「重く」なるのが世の常。今回作ってみた新デザインも、PCやiPadならストレスなく表示できるのですが、私の格安スマホからだと、操作できるようになるまでに数秒待たされる感覚があります。

とはいえ、このままで妥協するのはイヤだったので、動作が遅くなる原因を探り、対策もちょっと講じてみました。これが結構面倒だったりするのですが…続きはまた回を改めてのお話にしましょう。


投稿日

カテゴリー:

投稿者:



1回のみ
毎月

記事を気に入っていただけましたか?よろしければ、今後のSSK Worldの活動に向けてご支援をお願いいたします。

SSK Worldを「面白い!」と思っていただける方がありましたら、今後の当サイトの活動継続に向けて、ご支援をお願いいたします。

金額を選択

¥100
¥500
¥1,000
¥500
¥1,000
¥2,000

またはカスタム金額を入力

¥

ご協力いただき、ありがとうございます。

ご協力いただき、ありがとうございます。

送金送金

コメント

“目に訴えてみる” への1件のコメント

  1. sskworldのアバター
    sskworld

    こだわりを持って導入した全画面表示の写真のど真ん中に、GoogleがAdSense広告をぶっ込んで来やがることがあります。自動広告を使ってると、回避できないのだろうか(-_-;)。

コメントを残す

タグクラウド

2年縛り Amazon Android BESS Bluetooth CF-B5 CF-R2 CF-R4 CF-RZ4 CF-SV8 DIY iPhone LTE Movable Type Nintendo Switch NuAns NEO Reloaded SNS SSD USB PD Webサイト Webブラウザー Windows 10 Windows XP カメラ カーナビ クルマ ショップ ステップワゴンスパーダ スマートフォン バージョンアップ ブログ マラソン レッツノート ログハウス 中日ドラゴンズ 伊豆 倉庫 健康 写真 合唱 塗装 家族 携帯電話 旅行 日本プロ野球 映画 暮らし 東京 槇原敬之 浜松 無線LAN 自作PC 芝生 花壇 薪ストーブ 薪割り 記念日 野球 音楽 食べる