この記事は、ブログの”ログ”がコンピューターの操作記録 *を意味することに立ち返って、
2020年における、このサイト(ブログ)のデザインの主要な変更を記録することを目的としています。
また、この記事のコメント欄などを通して、ご訪問者の方（今、この記事を読まれている方）から、サイトのデザイン変更に対するご意見を頂くことも目的と考えています。
注釈
以下において、モバイルは、操作をタッチパネル主体で行う端末を指し、PCはマウスとキーボード主体での操作を行う端末を指します。
引用元URL(外部ページ)*：https://dictionary.goo.ne.jp/word/%E3%83%AD%E3%82%B0/#jn-236384
モバイル・PC共通の変更
以下は、モバイルでもPCでも確認できると想定している変更点です。
ページ読み込み時ヘッダーメニューアニメーションの設定
ページの読み込みが完了した際に、ヘッダーメニューが上から降りてくるように表示されるアニメーションを設定しました。(2020/12/10)
投稿日アイコンの変更
トップページや、記事のページのSNSシェアボタン(上)の下に表示されている投稿日アイコンを変更しました。(7/31)
SNSシェア・フォローボタンのデザイン
SNSシェア・フォローボタンを本文上・下、どちらもボタンの上下に線が入ったデザインに変更しました。
本文上のボタンは黒の上下線、本文下のボタンは各サービスのイメージカラーの上下線となっています。
変更前は、本文上のボタンが黒背景に白文字、本文下のボタンが白背景に文字色が各サービスのイメージカラーで細い四角形で囲まれたデザインとなっていました。
トップへ戻るボタンの挙動
トップへ戻るボタン(ページを下へスクロールした際に右下に表示される)がフッターの著作権表示の文と重なった際、裏に隠れるように設定しました。
変更前は、トップへ戻るボタンが著作権表示の文と重なった際、ボタンが文の上に重なっている状態でした。
これは、トップへ戻るボタンによって、フッターの著作権表示が隠れることを防ぐことを目的とした変更です。
カテゴリーラベルの色
本文下のカテゴリーラベルの色を変更しました。変更前は色が黒となっていました。
コメント欄の見出しの装飾
シェア・フォローボタン下の”あわせてご覧ください”欄の下にある、コメント欄の見出し”コメント”に下線を表示するように設定しました。
変更前は、下線は表示されていませんでした。
これは、”あわせてご覧ください”欄の見出しの下線とデザインを一致させることを目的とした変更です。
リンクのアニメーション
記事のシェア・フォローボタン下の”あわせてご覧ください”欄内のリンクの下にある、次の記事、前の記事へのリンクをクリック・ホバーした際に、リンク部分の背景色が変化し、影がつくように設定しました。
また、矢印の色が変化し、矢印の向きに向かって、わずかに動くように設定しました。
変更前は、リンクはホバー時の背景色のアニメーションのみ設定されていました。
アイコンボックスのアイコン変更
左に”?”や”!”などのアイコンが配置されている、アイコンボックスのアイコンが一部、変更されました。
PC向けの変更
以下は、PC向けに行った変更点です。
ヘッダーサブメニューのアニメーション
ヘッダーメニューにおいて、サブメニュー表示の際、縦に広がる形でメニューが展開されるアニメーションを設定しました。
変更前はアニメーションを設定していませんでした。
“あわせてご覧ください”欄のアニメーション
本文下の”あわせてご覧ください”欄に表示されている記事へのリンクをホバーした際のアニメーションを変更しました。
変更後は、リンクをホバーした際にリンクの部分が画面の縦の長さに対して2％下降するアニメーションに設定しました。
変更前は、リンクの部分が僅かに大きくなるアニメーションでした。
サイドバー内での目次の表示
“ゲーム”と”FreeCAD”、”レビュー”のカテゴリーに属する記事、および本記事において、サイドバーの末尾に目次が表示されるように設定しました。
この目次はページを下にスクロールしても追いかけてきます。
この機能は長い文章の記事を読んでいる際、少し前の見出しの箇所を見返したい場面を想定して設定しました。
カテゴリー・タブラベルのアニメーション
本文下のカテゴリー・タブラベルをホバーした際に、色が変化するように設定を変更しました。
変更前は、カテゴリーラベルはホバー時に色の変化がなく、タブラベルは薄い青に変化するアニメーションでした。
モバイル向けの変更
モバイル向けの変更では、サイト内のリンクをタッチした際の反応(アニメーション)や小さいスクリーンでの見やすさ、操作のしやすさを考慮しました。
ヘッダーメニューのアニメーション
モバイルのヘッダーメニューでも、PCと同じようにカテゴリーのリンクを操作時にアニメーションが表示されるようになりました。
この変更でPCと異なる点はホバー時ではなく、クリック時にアニメーションが表示される点です。
変更前はアニメーションは表示されていませんでした。
フッターメニューのリンク
リンクを押し間違えにくくするため、フッターメニューのリンク同士の間隔を広げ、リンクに下線を表示させるように設定しました。
リンクのアニメーション
トップページの各記事へのリンク、記事のシェア・フォローボタン下の“あわせてご覧ください”欄内のリンク、その下にある次の記事、前の記事へのリンクをクリックした際に、リンク部分の背景色が変化し、影がつくように設定しました。
また、矢印の色が変化し、矢印の向きに向かって、少し動くように設定しました。
変更前は、リンクのクリック時のアニメーションは設定していませんでした。
モバイルヘッダーメニュー(280px以下)
ディスプレイの横幅が280px以下の端末で閲覧した場合に、モバイルヘッダーメニューの左右のアイコンのキャプション(メニュー、検索など)が表示されなくなるように設定しました。
変更前は、280px以下の端末でもキャプションが表示されていましたが、改行が発生していました。
主な変更点は以上となります。最後までお読みくださり、ありがとうございました。
コメント