RYOの備忘録

20歳学生です。ここでは誰かの役に立つこと、自分の成長のために徒然なるままに書きます。

サイト分析日記-第6回-

こんにちは。望月亮佑です。

 

大変失礼しました。みなさん楽しみにしていたサイト分析日記。諸事情ありまして3日ほど休載していましたが再開します(笑)これからは朝の30分で書くを徹底します。

 

今回は株式会社考和産業さんです。

 

全体

f:id:ryo3336:20170918185020p:plain

 

ファーストビューです。仕事に対して真摯に向き合い一生懸命な様子が伝わってきます。かなりの好印象です。あとは電話番号が見やすい位置にあるのは大切ですね。ここからのお問い合わせによって新たな顧客を獲得できたりしそうですね。

 

ヘッダー

f:id:ryo3336:20170918185232p:plain

 

このヘッダーは個人的に一番良いと思っています。とても見やすく機能面ではヘッダーの意味を最も果たしていると思います。また、自分のいる場所が青い下線が引かれているのが良いですね。

 

 

フォント

font-family : Lato,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Arial, "MS P Gothic", "MS Pゴシック", sans-serif;

 

游ゴシックについてはこちらで勉強しました。

www.jiyu-kobo.co.jp

 

 

その他

f:id:ryo3336:20170918185824p:plain

 

この背景の最近よく見る虫が動いているみたいなやつが気になったので調べてみたらプラグインがありました!「PARATICLEGROUND」と言うみたいです。

 

デモ→Particleground demo

Git→https://github.com/jnicol/particleground

 

簡単に使い方をメモ。こちらより抜粋です。

on-ze.com

 

まずはscriptで以下の通り記述して必要ファイルを読み込みます。

<script src="jquery.js"></script>

<script src="jquery.particleground.min.js"></script>

同時に[Particleground]を効かせるためのボックス要素も準備します。

<body>

	<div id="particles"></div>

</body>

最後にスクリプトを動かすために以下の記述を。

$('#particles').particleground({

	dotColor: '#ccc',

	lineColor: '#ddd'

	particleRadius: 4

});

めちゃくちゃ簡単だー。オプション設定もあるので簡単に細かい調整もできそうです!

 

まとめ

あたりまえですが、サイトを通して何を伝えたいのか。それを伝えるためにどうするのか。それを考えてサイトを設計しないとですね。

 

あとプラグインに出会ったら忘れないようにメモして、必要な時は積極的に活用していこうと思います!