【デザインまとめ】海外のポートフォリオサイト15選

  • このエントリーをはてなブックマークに追加

GWの中日、皆様いかがお過ごしでしょうか。通勤の電車の中も行楽の雰囲気が凄まじいですね。
お天気も良いですしどこかに出かけたくなりますね。弊社はカレンダー通り営業しております。


さて、今日は海外のポートフォリオのデザインをご紹介したいと思います。
国内にももちろん素敵なデザインやギミックのものがたくさんあるんですが、海外の個性色濃いサイトにどうしても憧れてしまいます。どうしてあんなに素敵に見えるんでしょうね。(外国語だからというのもあると思いますが…)
作り手の自己満足と言ってしまえばそれまでなのですが、ただ並べるだけではつまらない…他とは違う、より魅力的な見せ方のものを作りたいですよね。

ご参考になれば幸いです。

01
mili kuo
イラストをクリックすると簡単なキャプションが表示されます。まずイラストがキャッチーで素敵。可愛らしいです。

02
Studio Songes
スクロールをすると、1ページずつダイナミックに動きます。イージングが印象的。

03
vissio
サムネイルをクリックで制作プロセスや他のイメージを表示⇒さらにクリックで全画面で画像を表示、の2段階の構成。
jsもストレスなく動きますし、プロジェクトごとに詳しく説明したい場合に煩雑としないので良いです。

04
Barnyard
サムネイルにマウスオーバーで、イメージのズームと、キャプションが表示されます。色合いがカラフルで素敵。

05
SIXZERO
色を進数で表示していたり、全体的に制作側の人間でないと分からないだろう表現が多いですが、見ていると何だか閃きそうだったので掲載。分かりにくいですが表現次第で何か応用がききそうです。

06
Zack Batsaikhan
Worksの部分、サムネイルにマウスオーバーすると、画像が虫眼鏡のように拡大表示されます。

07
Shokunin
サイト全体がイラストでまとめられていて、親しみやすい感じですね。
worksはそれぞれフルサイズで確認できる所が良いと思います。

09
Igor Solovey
スクロールで動かすサイトです。
動きが遅めなのでストレスを感じますが、worksの箇所で拡大表示されるのが良いな、と。

08
Jovan Rocanov
サムネイルをクリックすると、そのプロジェクトの他のイメージが表示されます。
マウスオーバーしないとどういったカテゴリなのかが分からない所が不便ですが、構成はシンプルで分かりやすいです。

10
Mads Burcharth
キーボードを使用して動きます。スクロールも割にストレス無くテンポ良く動きます。
ページごとに色が違いカラフルですし、トントンと次を閲覧できるのが良いですね。

11
Oleg Lyutov
スクロールで下に横にとダイナミックに動きます。プロジェクトごとに背景を変えて全画面で表示している所が、分かりやすくて良いです。

12
jewelleries.co
サイト下部にある「More themes & plugins」の項目なのですが、オンマウスで画面の色ごと変わってしまうのが面白いな、と。

13
Cosmina
階層が深くなりすぎると自分がどこにいるのか迷子になりそうですが、実際にそのプロジェクトのサイトを見ているかのように画面全体で表示され、イメージがつきやすいですね。
細かいところにjsが使用されていたり、参考になる場所は多いです。

14
Why Interactive
スクロールかマウスのスライドで動きます。下部にサムネイルが表示されるパターン。予想できない動きをする時があるので視線が泳ぎますが、手がけた内容をアイコンで分かりやすく表示したり、ダイナミックな見せ方は良いです。

15
Tyler Somers
サムネイルをクリックで、プロジェクトの詳細のページにシュッと移動します。
制作プロセスが紹介されていて、とても良いと思います。



執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。 目次1 1.CSSとJSが直接使えない1.1 ク […]

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。 専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。 今回は、そのための仕組みづくりについてご紹介します。 制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。 目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。 スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。 今回は、After Effects(以降AE)でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。 もう一度再生 目次1 作業フロー1.1 注意点:グラデーションが使用不可2 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。