見出し画像

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


特別中心からの幅を決めず、ブラウザサイズに合わせて70~80%あたりでコンテンツ展開をしている
ベースは中心寄せ
ゴシック系フォントで読みやすく見やすい印象
イラストが全体にちりばめられていて、サイトの雰囲気を作っている

画面左下に固定ボタンあり
特に目立たせたいページ、知ってもらいたいページへの誘導


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

ロゴを大き目に中心に配置
グローバルメニューもフォント大き目ゴシックでわかりやすく
メインのイメージは若干暗くして、ロゴやフォントは白でを配置することで目立つように
背景イメージはフワッと何枚かが切り替わるようになっている

右側にはナビゲーションメニューでアンカーリンクさせている配慮あり


お知らせ

CMSで写真、日付、カテゴリー、詳細文章が自動的にスクロールしていく形
横幅いっぱいで自動スクロール


アバウト

大き目フォントでわかりやすくコンセプトなどをテキストで見せている
画像をちりばめて目を引く部分


メッセージ


右下に控えめに筆者の写真と名称

アバウトと同じくフォント大き目でわかりやすい
メッセージの人物写真は小さめに。
イラストをちりばめている


区切り

コンテンツ分けを工夫
コンテンツの分け目に画像を使ってメッセージを入れている
ただの四角ではなく、分かれ目もギザギザさせたり工夫して見せている


コンテンツ

写真を大き目にオーバーラップさせて使っている
文字もおおきくわかりやすい

数字も大きく表示

写真、文章を段落に分けて左右に振り分ける工夫をしている


ブログ

お知らせ同様
CMSで写真、日付、カテゴリー、詳細文章が自動的にスクロールしていく形
横幅いっぱいで自動スクロール


アクセス

GoogleMapは大き目に表示
知りたい情報が一目でわかる
住所や電話番号、各種情報を記載


コンタクト

問い合わせの方法が電話とフォームがあることがシンプルでわかりやすく表記されている


フッター

濃い目の背景に白文字でシンプルにわかりやすく


まとめ

イラストがところどころにちりばめられていて、サイト全体の雰囲気を和やかにさせている
イラストが多めのところに、写真が出てくるとより目をひく印象
堅い業種であってもイラストを多様することによって親しみやすさが出てくる
色も白ベース、薄目の背景カラーを使っている部分はあるがフッターだけ色を濃く配置してメリハリをつけている


XDデータ

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

ここから先は

0字 / 1ファイル

¥ 300

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