ポートフォリオサイトをリデザインしました!

thumb_wcm2

この度、私のポートフォリオWebサイトを約3年ぶりにリニューアルしました!日本語版もあります。実は以前あったものが人生で初めて作ったWordPressオリジナルテーマでした。当時の自分なりにいろんなサイトを見ながら、試行錯誤して作ったものの、今見ると階層ぐっちゃぐちゃ、コードも古いので、改めて作りなおすことに。


ポートフォリオサイト
こんな感じになりました。

Webフォント

Webフォント
今回のデザインの大きなポイントのひとつにWebフォントがあります。書体のもたらすデザインへの影響力がうまく表現できていると嬉しいです。英語版ではGoogle Font使用。初めての試みとして、日本語のWebフォントも試してみました。TypeSquareを利用しています。ただ、ご覧頂ければわかりますが、ちゃんと表示されるまで若干タイムラグが発生しています。日本語のWebフォントはやはりまだ厳しいかもしれません。TypeSquareでは日本語Webフォントが2012年12月末まで無料で利用できるそうなので、期間中は様子をみてみます。我慢できなくなったら画像を使うなど、他の方法に切り替える予定。

多言語化

Webクリエイターボックスは「WordPressプラグイン「qTranslate」でブログを多言語化する」でも紹介したとおり「qTranslate」というプラグインを使って多言語化しているのですが、元々ポートフォリオサイトでは「WPML」というプラグインを使っていたので、有料になりましたが今回もこちらを使いました。ブログに対応した多言語ブログ版はUS$29、CMSWebサイトに使える多言語CMS版はUS$79。30日間の返金保証もあります。

多言語化
基本的な使い方は「WordPressプラグイン「WPML」でブログを多言語化する」で紹介したやり方とあまり変わりません。便利だったのが「ストリング翻訳」という機能です。本来 .moファイルを用意する必要があるテーマファイル内の単語も、「<?php _e('Word','theme-name')?>」という翻訳用タグを自動検出し、ダッシュボード内で一括管理できます。

サポートブラウザー

モダンブラウザ対応
モダンブラウザ対応。過去半年間のGoogleアナリティクスのデータによると、IE8が4.3%、IE7が0.3%、IE6が0.1%という事で、IE7と6は確認もしてません。多分うまく見れないと思います。IE8はCSS3の部分以外は表示されます。0.9%のOperaもそれなりに見れると思います。

ホーム

ホーム
全体のデザインは「すっきり・華やか」を意識しています。はじめはモノクロ+青という、ブログと同じ色合いで考えていましたが、ちょっと堅苦しいイメージになってしまいました。なので各ページでメインカラーを変え、ポップな色合いを大きく扱うことでバランスをとりました。大きめのタグラインは相変わらず。

「紹介」ページ

スキル

スキル
できること、得意なことをハート内に納めてみました。以前は自分のスキルを星評価で表示していましたが、よく考えたらポートフォリオサイトにそのまま自分のスキルを反映するべきなのでは…と思い、削除。

タイムライン

タイムライン
来歴・住んでいた国を文章で書いていたら収集がつかなくなったので、タイムラインとしてまとめました。

「作品」ページ

作品一覧

作品一覧
作品のサムネイルはカテゴリー毎にフィルターをかけれるようにしました。

作品詳細

作品詳細
レイアウトはそのまま。イメージスライダーはスマートフォンでスワイプできます。

「連絡先」ページ

コンタクトフォーム
縦長のコンタクトフォームを2カラムにして、コンパクトにまとめました。

フッター

好きな名言
自分の好きな名言をいくつか。

日本語版用ドメインを ja.webcreatormana.com に変更したので、まだ細かい作業がちょいちょい残っています。。その辺りも含め、バグなんぞあればご報告ください!

シェアする

コメント

  • Linux(Ubuntu12.04) && Chrome 21.0.1180.89で見ています。
    新デザイン、凄くスマートですね。ただ・・日本語にすると右上のナビゲーションがテキストの上半分が見えなくなっています。
    FireFoxでは問題なく表示されてます。

  • おぉー!かっけぇ!リニューアルお疲れ様っした!ロンドンの環境に移ってまたデザインのテイスト変わってきましたかね?つーか、本当に色んなところでWEBデザイナーしてきたんですねぇと、これ見て改めてすげぇと思いましたw

  • WEB_Tortue

    最近になってちょくちょくブログを拝見させて頂き、楽しく読んでいます。

    リデザインされたポートフォリオサイトについてですが、紹介ページ内のタイムラインの画像のスライドが自分には少し早く、読みにくいように感じました。
    2004から2007の間です。利用ブラウザはグーグルクロムです。

  • Twitterでこのサイトとmanaさんフォローしてます!
    どちらもいつも楽しく勉強になります。

    Operaで見てますが、日本語のフォントの丸フォークが
    適用されていない以外は問題なく表示されてます。
    少し僕も2004~2007までの間のタイムラインの画像のスライドが少し早く感じました。

    でも、それ以上に
    すごく綺麗で丁寧に制作されていて
    特に余白の取り方が自分は苦手なので勉強になります。
    素敵なサイトなので見てて凄くワクワクしました。お気に入りに登録しました!

    Manaさんの記事やコメントはどれも勉強になります。

  • ありがとうございます。確認してみます!

  • にょほほ!ありがとう!

  • 報告ありがとうございます!少し遅らせてみました。

  • スライドのスピードを少し遅らせてみました。ワクワクだなんて…嬉しい…!!ありがとうございます!

  • こんにちは、2年ぶりくらいにコメントさせていただきます。
    ポートフォリオを初めて作ったときに以前のmanaさんのポートフォリオを参考にさせていただきました。で、最近2回目のポートフォリオを作ろうと思っていて、そしてたらmanaさんのリニューアルしたポートフォリオがまた目にとまりましたw また参考にさせていただきます

    45歳からWebデザインを始めたものより

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)