見出し画像

あるサイトの考察(ワイヤーフレーム002)


最大コンテンツ幅 1080px
最小コンテンツ幅 725px

コンテンツのタイトル文字は大き目
その他全体的にテキストは小さい印象
11~14px

ゴシック系フォントで見やすく
タイトルは太ゴシック

ところどころにイメージが配置されているが、形はランダム。
矩形に入っているものの、ランダムで幅も自由な印象。
あえてきっちり作らずラフに配置させて目をひいている

全体的に幅きっちり・・・というよりは、ランダムに配置されている印象。
おおよその幅があっていればOKというようなラフな雰囲気。


メニューとメインビジュアル・トップページ上部

手書きフォントでインパクトをつけている

比較的オーソドックスなパターンではあるが、メインビジュアル部分でインパクトをつけている。
はみ出した手書き文字のようなイメージで目を引き、縦文字なども入れ込む事で、印象深くなる。丸いリンクボタンなどもさりげなく配置して他ページへ誘導させている。


お知らせ

クリックすると装飾のバーの色が変わる仕組み

メインビジュアルに比べると幅が狭く若干違和感があったがテキスト量があまり無いので、バランス的には良いのかもしれない。

日付とテキスト両方が一つのクリックでリンクを飛ばす形
日付は小さいフォントで表示


コンセプト

背景やイメージの工夫次第で魅せれる箇所

背景はコーポレートカラーで濃くして目をひかせている
一番強めたい部分ということがわかる


メッセージ

シンプルに読ませている

あえて他ページへ誘導せずに、TOPページでメッセージ全文を伝えている
伝えたいメッセージをTOPで読ませている


コラム

紹介したいコンテンツへのリンクで誘導させている
CMSを使い別ページへのリンク


ピックアップ・フッター


・ピックアップ
外部ページへのリンクをバナーを使っての誘導
動画(YouTube)へのリンクなど

・フッター
シンプル
お問い合わせやSNSへのリンク
重要ではないページへのリンク
コピーライト等


メニュー

開く時にアニメーション効果をつけている

上部にFIXする形
グローバルメニューが表示されていても、右上にトグルを出しておき、クリックでメニューが表示される


まとめ

大きな動きなどは無いが、要素要素に細かな工夫で印象づけている
ボタン部分やリンクテキストのホバー時に多少のアニメーションをつけている
ゴチャゴチャせず全体的にスッキリとしていて、見やすい


XDデータ

XDデータがダウンロードできます。
ご参考まで。

ここから先は

0字 / 1ファイル

¥ 300

サポート頂けたら幸いです。頂いたサポートはクリエイターとしての活動費に使わせていただきます!