待ちに待った ベルリンぐらしの「鬼のようによくわかるプロフィール!」ページができました。
極めてモダンかつ現在のウェブにおける技術の集大成的な作りとなっていますので、是非ご覧ください。
私は一時期ウェブ系のプログラマも経験しましたし、最近では長くウェブディレクターの経験もあります。ウェブディレクターの頃は自分でサイトのワイヤーフレームを作成し、デザイナーに依頼して一緒に数十件のサイトをブラッシュアップしながら作成していました。
デザインを依頼するときには現在のウェブデザインの流行りや、新たな表示上のトリックなどデザインのパターンも常にウォッチしておく必要があります。そんな私が考える、今最もかっこいい!それでいてUI,UXともに優れた見るだけで鬼にようにわかるプロフィールができたというわけです。
それでは作成に数十時間を費やした、ベルリンぐらし「鬼のようによくわかるプロフィール!」ページの作成のポイントをご紹介しましょう。
ベルリンぐらし「鬼のようによくわかるプロフィール!」ページのポイント
- ワードアートのようなタイトルをCSSで再現。とっても調整が大変
- 超近代的なアクセスカウンタを配置。みんなでキリ番を狙おう。ただし数字は固定だ!
- <MARQUEE>タグの失われる今だからこそ、文字を横に積極的に動かしていこ!って思った。だからやった。CSSで
- 圧倒的なユーザー体験(UX)を促すプロフィールのテーブル表示
- トップへ戻るとき、少しでもあなたに元気でいてほしいという気持ちを込めた「トップへ戻るボタン」
あぁ大丈夫だ。もちろんベルリン暮らしのプロフィールページにもアクセスカウンタを用意した。みんなキリ番ゲットして記念カキコしてくれよな。ただし数字は固定だから気をつけてくれ。
だけど悲しいかなHTML5では廃止される予定だ。本当に良いものってのは失われてはじめて価値がわかるってことだな。だから俺たちは<MARQUEE>タグをあえて使わず、一生文字を動かす想いで文字をCSSで動かした。あぁそうだ、文字を横に動かすための膨大なコードがCSSにある。可読性なんかくそくらえだ。
そしてこのページのメインのコンテンツである、俺たちのプロフィールはテーブル表示で一発でわかるように設計した。圧倒的なユーザー体験を是非ご堪能くださいませってな。
トップへ戻るとき、少しでもあなたたちに元気でいてほしいという気持ちを込めた極上のボタンだ。ボタンをホバーするだけで、リポビタンD飲むよりも元気になるぜ。そして元気になったもう1記事ベルリン暮らしの記事を読んでほしい。
そうなったらもうワードアートしか俺の頭にはなかったわけ。でも画像をそのままじゃなくて、SEO的な意味も考えてテキストでいきたかった。もうこだわりだよね。うん、そう。CSSでワードアートを表現したのさ。調整は死ぬほど大変だったけどけど俺は満足しているぜ。