ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

2015年3月 ホームページ制作の参考にしたい!気になったWebサイトまとめ

| カテゴリー : Webデザイン

こんにちは。アイドットデザインの越水です。

2015年もあっという間に3ヶ月が過ぎ4月になりました。進学や就職で新たな生活を迎える人も多いこの季節、私たちもフレッシュな気持ちで日々のホームページ制作に取り組んでいこうと思います。

それでは今回も3月にチェックしていて気になったWebサイトをまとめて紹介します。

最近は四角形という枠にとらわれずにタイポグラフィを斜めに配置したり、多角形を組み合わせたりと斬新なレイアウトで情報を設計するデザインに出会うことも増えています。

HTML5やCSS3によってクリエイターはより自由度の高い表現が可能になっているため、Webの特性を活かしたインタラクティブなコンテンツの楽しみ方も主流になってくるでしょう。

※「2015年3月に公開されたサイト」というわけではないのでご了承ください。

Koharu Sugawara

koharu-sugawara
URL : http://koharusugawara.com/

日本人ダンサーの方のポートフォリオサイトです。

モノクロな配色のデザインですが、動画や写真の効果により躍動感が伝わる内容になっています。

動画背景がトレンドになっており、個人の活動をひと目で伝えるには効果的ですね。

Slanted – Enrico Floriddia

slanted
URL : http://www.slanted.cc/

フランスのフォトグラファーの方のホームページです。

大胆に斜めに配置されたタイポグラフィ中心のデザインで、リンクをクリックすると辞書のような注釈が出てきたり画像がズラッと並んだり一風変わった設計が面白いです。

BAO BAO ISSEY MIYAKE

bao-bao
URL : http://www.baobaoisseymiyake.com/

アパレル企業イッセイミヤケのファッションブランドBAO BAOのWebサイト。

制作は有名なメディア・コンテンツを次々生み出すthaによるもので、グリグリうごくFlashムービーで迫力のある内容になっています。

Andy Wolf Eyewear

andy-wolf-eyewear
URL : http://www.andy-wolf.com/awe/#/

オーストリアのハンドメイドアイウェアのブランドサイト。

シンプルな構成とレイアウトですが、スクロールしていく写真にユーモアがあって楽しい雰囲気も感じられます。

操作感やアイテム閲覧の際の導線もすっきりとわかりやすく、サイト設計の参考にしたいホームページです。

PROTERAS RECRUITING SITE

proteras-recruiting
URL : http://www.proteras.co.jp/recruit/

空間演出や店舗プロデュースを行う株式会社プロテラスのリクルートサイト。

新しいことにチャレンジし続ける姿勢を感じられるCanvas要素やJavaScriptによるアニメーション溢れるデザイン。

動画とアニメーションを組み合わせて時代に合わせて変化し続ける様子が表現されています。

New Dimension of Creative

new-dimension-of-creative
URL : http://ndc.agency/

ポーランドを拠点とするインタラクティブコンテンツの制作会社のホームページ。

ドットで繋がれた多角形のレイアウトが新しさを感じさせます。

緻密さを感じさせるデザインとアニメーションに富んでいて、かなりコンテンツの情報設計も練りこまれている印象を感じます。

STRANGR

strangr
URL : http://strangr.jp/

FICCに所属しているフロントエンドエンジニアの方のポートフォリオサイト。

桜の3Dアニメーションや「クール・ジャパン!」といった雰囲気の和風デザインがかっこいい。

3Dライブラリによる表現を得意としているらしく、実装アーカイブのコンテンツもあります。

Summer Highs

summer-highs
URL : http://my.austria.info/uk/en/experiences/schladming

オーストリアの観光情報Webサイト。

全画面動画でオーストリア各都市で過ごすホリデイの様子がイメージできるようになっています。

画面真ん中に位置する円形のナビゲーションは、最近増えてきて他のサイトでも見ることが多くなってきたのでチェックしておきたいところ。

Matter

matter
URL : http://matterproductions.com/

ロンドンにある映像・写真プロダクションのホームページ。

高いクオリティの映像作品が並んでいて見応えがあります。シンプルですっきり見やすい構成。

Join The One Who Will End Cancer

join-the-one-who-will-end-cancer
URL : https://theone.cancerresearch/

オーストラリアにある癌研究のための基金によるホームページ。

サイトトップで複数の人物の画像がモーフィングするように移り変わる表現が珍しいです。どうやらSVGを活用した実装っぽい。

自分の画像を投稿して、このアニメーションに加えることが可能です。

Chrome Experiment #1000

chrome-experiment
URL : http://1000.chromeexperiments.com/

Chromeによる実験的な表現のスクリプトを集めたサイト。

様々なインタラクションのページが集めてあって、ずっと見ていても飽きることがありません。

Offpixel by Martin Pavely

offpixel
URL : http://www.offpixel.co/

ニューヨークのクリエイターによるポートフォリオサイト。

画面上をドラッグすると現れるメニューなど、すこし変わったインタラクションを体験できます。

実績として上げられている作品も凝ったインタラクションのものばかり。

In Pieces

in-pieces
URL : http://www.species-in-pieces.com/

絶滅危惧種に関する啓蒙を行うためのインタラクティブ展示サイト。

絶滅寸前の動物を30枚のポリゴンで作り出して展示するという試みで、動きはCSSアニメーションがベースになっています。

CSSアニメーションも使いこなせばここまで様々な動きを見せることができるようになっています。

Bianco by Christiane

bianco
URL : http://christiane.bianco.com/

女性向けのフットウェアを扱うアパレルサイト。

すっきりとしたUIとしつこすぎないインタラクションががオシャレな雰囲気を与えます。

THE ORTHODOX WORKS

the-orthodox-works
URL : http://theorthodoxworks.com/

長野を拠点に活動するフリーランスWeb制作者の方のポートフォリオサイト。

最近ちょっと流行りっぽいジオメトリックな感じのデザイン。

余白の使い方とタイポグラフィのバランスを参考にしたい。

Thank God It’s Pi Day

thank-god-its-piday
URL : http://www.thankgoditspiday.com/

「3/14はπ(パイ)の日だ!」ということで3月14日にリリースされたこのサイト。

放置しておくと円周率を一桁ずつ遡りながらアニメーションとSEを垂れ流していきます。

Nicolas Tarier

nicolas-tarier
URL : http://www.nicolastarier.com/

フランス・リヨンを拠点とするWebアートディレクターのポートフォリオサイト。

実績紹介中心の構成で、シンプルで見やすいレイアウトになっています。

Elite Model Management Paris

elite-model-management
URL : http://elitemodel.fr/en/

ファッションブランドEliteのモデル一覧が閲覧できるWebサイト。

美しい写真とミニマルなデザインでついつい時間を忘れて眺めてしまいます。

ナビゲーションの設計やアニメーションも洗練されていて、エレガントなデザインのサイトを作るときに参考にしたいです。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。