目次
フェリカテクニカルアカデミー「東京・池袋」の受講生作品で紹介されました。
http://www.felica.info/kikin/web/works.shtml
Tokyo Q Studio
WEBクラス卒業生
Ｔさん
在学中に制作したポートフォリオサイトです。デザイン性が高く、javascriptも効果的に使用出来ており、スキルを十分にアピールできています。ページを実際にご覧になればわかりますが、デザインがよにかくいいですね。とても素晴らしいできです。サイトを見る
被リンクを調べていたらリンクされていました。
とても嬉しい事です！
製作背景
製作時は様々なパターンのトップページを製作しました。
３パターン目にParallaxを試していたら閃いたと言う感じです。
構成は
- Parallaxトップページ
- Adobe Muse使用のポートフォリオ（Web・DTM・リンク集)
- WordPressブログサイト
の３部構成です。
何故この様な形にしたかと言うと、WordPressをトップに持ってくるとPlug-inを増やして行くごとに表示スピードが格段に落ちると言う事です。
これではトップページから表示速度が遅く離脱率が上がります。
トップページは通常のHTMLで作っておくことでスマホでの表示も軽くなり、ブログを見たい人はその後の展開と言う事です。
その為WordPress側はカテゴリーフィルターを搭載したテンプレートを選択しています。
背景やデザインの方向性を同じにすることで違和感が無く、尚かつ自分がどこにいるかも明確になりやすいと考えています。
同じレイアウトだと飽きるかも知れないと考えました。
- トップはあくまでも「about」的な存在
- ポートフォリオは動き込みで見やすい構成
- ブログは見やすく読みやすいシンプルで検索がしやすい構成。
これが私の考えるわかりやすいWebサイトだと思っています。
Parallaxの導入経緯
昨今Webでは企業サイトに標準化されるような動きが多いように思えました。
動きも少なく情報のみを見やすいレイアウトで見ていても面白味がない。
その方が良い部分は多いのは理解しています。
しかし、私は今後はCSS3の標準化で動きを伴った「見やすいサイト」が生き残る要因になると考えています。
実際動きや企画の面白さで若い会社がドンドン排出され世の動きを加速させる起爆剤になっているように思えます。
日本を今一度元気な経済状況に戻すためにもこの様な動きは必要であると考えます。
なので立体的に見えるParallaxを導入し、１ページごとに部門を分けた構成にしました。
スマホ対策も忘れてはいません。
スマホで次ページに移れなくなる仕様なのでボタンをスマホ用にCSS3で書き換えています。
スクリプト上最上部からスクロールしてしまいますが、そこは後日勉強が進みましたら修正致します。
Adobe Museの導入経緯
Web製作はスピードが命です。
その為通常のコーディングだけでは時間的に難しい案件も出てくるであろうと考えていました。
事実世の中にはコードが書けなくてもWebページを製作することは可能なアプリが沢山あります。
その中でもAdobe MuseはIllustrator等Adobe製品を使うことが出来ればかなりの事が出来るようになっていました。
ソースコードでのアウトラインもほぼ合わせることが出来、十分にアクセス数は稼いでいます。
VersionがCCになればParallaxも出来る仕様になり、可能性はもっと増えてきます。
時間と費用対効果を考えMuseを使えるようにしたかったのです。
WebFontにも対応しており、デザインWebサイトを作る際には楽しく作業出来ます。
WordPressブログの立ち位置
WordPressブログではスマホから投稿出来るシステムを組み、後日カテゴリーやタグを編集することでSEO対策を施します。
内容はWeb関係・家電・PCパーツ等のテクノロジーを中心にニュースサイトから転載しています。
素早さが全て。時間の少ない現代社会で移動時間だけで３〜５投稿出来れば更新が終わったも同然です。
１日１回以上投稿することで頻繁に更新していることがGoogleに通知されます。
SEO的にも動きが多いとアクセスも増える。
表示順位も重要ですが、入口を増やし入りやすくするのが目的です。
実際、「iPhone5s スペック」でGoogle・Yahoo!共に常に上位ランカーです。
ブログを始めて３ヶ月で1324記事。
818記事/1,324記事中がGoogleで１ページ目に表示されています。
１ページ目へのヒット率60%以上。
素晴らしい結果だと思いませんか？
上記の理由で製作致しました。
Webは言われて作るだけでは今後難しいと考えます。
自分から率先して考え、盛り込めるようなスキルを付けて行きたいと思っております。