はぁはぁブログ

はぁはぁするブログです

サイトを「ペライチ」にダイエットしてみました

こんにちは。
まみぺこです。
プロフィールサイトを
またあたらしくつくってみたので
よかったらみてってくださいませ。
http://mamipeko.net/

どんなふうにリニューアルしたのか
まとめてみたのでいまからお話してみますね。

ひとつにまとめる

私のプロフィールサイト、
もともとはこんなかんじで
複数ページにわけていたんですが
ひとつの index.html だけにまとめて
いわゆる「ペライチ」にしてみました。

トップページ

トップページはこんなかんじ。
「はじめまして」からきちんと読んでもらえるように
テキストはわかりやすくシンプルに、かわいいフォントで。

トップページのファーストビューはCSSのみで
こんなふうにブラウザサイズにあわせて
背景がぴったりなるようにしてあります。

次は「Web」
私が趣味でつくったサイトやブログをいくつか紹介してみました。
こんなふうに、みてもらいたいリンクを画像でならべておくだけで
自己紹介としてわかりやすくていいですよね。

ちなみに画像にマウスオンすると
会いたくて会いたくてふるえるようになっています。

Instagramもやってます」ということで
私がうつっている写真を選んでならべてみたり。

「Work」では
私がいままでお仕事してきた会社をのせてあります。
どちらもWeb制作会社で、企業のサイトをゴリゴリつくっています。

私のアカウントのアイコンや
かんたんなプロフィールをここでみせてから

つながりのある人たちを
紹介してみました。
Yappoさんとはまちちゃんのテキスト、
こんなかんじにしかならなかったです、ごめんなさい。
人間はコンテンツ。

いつも公開している
Googleカレンダーものせておきました。
ごはんのお誘いとかイベントのお誘いは
おきがるにお声かけくださいませ。

さいごのフッターは
トップと対になるデザインでまとめてみました。
SNSへのリンクやメールアドレスなど
別のサイトへ飛ぶリンクはさいごにあるとよさそう。

スマホサイトも

スマホサイトはこんなかんじ。
ワンソースのレスポンシブです。

サイトのダイエット

ペライチにリニューアルするにあたって
まずは「いるコンテンツ」と「いらないコンテンツ」をわけるところからやって
いらない情報はごっそり削除してしまいました。
これってなんかサイトのダイエットみたいですよね。
サイトもダイエットする時代。
結果にコミットしました。

ペライチいいね

ペライチいいですね。
よくなった!
わかりやすくなった!
というかんじがします。

仕事で「クライアントのために」「だれかのために」サイトをつくるのとは別に
たまにこうして「自分のために」「好きなように」つくるのはたのしいですね。
以上、私のサイトのペライチ化まとめでした!

サイトみてね

http://mamipeko.net/