【Webデザイン】今週の「良きウェブ」(4月28日〜5月5日)
5どうもです。今年のGWは半分ほど寝込んでしまいました。
今週も良きウェブまとめです。今週はちょと量少なめで申し訳ないです。
いつも通りまとめるのはまとめるのですが、今週からちょっとずつこちらの文章ボリュームを落とそうと思います。
というのも、前回のブログ記事で書いていたようにウェブサイトギャラリーを自分の情報整理のためにも立ち上げようと考えていて
その下準備的な意味で、説明文を端的にし、その代わりタグ的なものを付加して行こうという試みです。
惰性的に文章を書くよりも明確なタグづけした方が伝わりやすいかもしれませんし。
というような感じでお届けします。
デザインが「良きウェブ」
TORACO｜阪神タイガース公式サイト
http://hanshintigers.jp/toraco/
阪神タイガースファンの女子をメインに据えたかわいい系サイト。アニメーションはないがデザインで勝負してる。
#かわいい系 #Slick #パステルカラー #アイドル #手書き文字 #柄
燕アンテナ by Graphika inc.
http://graphika-inc.com/tsubame_antenna/
web製作会社の情報発信ブログ。パステルカラーと柄の相性がとても良い。
#かわいい系 #パステルカラー #手書き文字 #柄 #ロゴ
世界最大級の水族館 海遊館
http://www.kaiyukan.com/
魚の写真がとてもキレイに見えるように工夫されている。トップはあまりごちゃごちゃしないようにスッキリレイアウト。
#パララックス #キレイめ #スクールエフェクト #CSSアニメーション #イラスト
2018 Brand New Conference
https://www.underconsideration.com/brandnewconference/
敷き詰められた石板の中にリンクが紛れ込んでいたりするレイアウト。グリッドデザインでも珍しいタイプ。
#グリッドレイアウト #クール #シンプル #モノトーン
Maison de FLEUR(メゾンドフルール) | ストライプインターナショナル
https://www.maisondefleur.jp/
かわいいテクスチャ背景やフレームに埋め込まれた写真のあしらいがポイント。花びらが散るアニメーションが可憐、
#CSSアニメーション #Canvas #連番アニメーション #かわいい系 #ロゴ #写真レイアウトが特殊
宮田智佳 OFFICIAL-WEB
http://tomkomiyata7240.jellybean.jp/
台形カットした写真や斜めに切り込むレイアウトが良き。
#CSSアニメーション #幾何学模様 #シンプル #かわいい系 #写真レイアウトが特殊
UENO PLANET
http://www.tokyo-zoo.net/zoo/ueno/planet/pc/
日本の動物園サイトのごちゃごちゃしたイメージを覆すサイト。スマホがメイン。
#CSSアニメーション #音楽あり #イラスト #かわいい系 #TweenMax #パララックス #背景固定
ギミックや発想が「良きウェブ」
【S5-Style】Hello world.
http://www.s5-style.com/
ザ・スタイリッシュ。画面の遷移はもちろん、特にフォントアニメーションのスムーズさが光るサイト。
#TweenMax #スタイリッシュ系 #シームレスページ遷移 #複数アニメーション #3D # フェードイン #黒 #フォントアニメーション
KAZ ARAHAMA :: PHOTOGRAPHER
http://www.kazarahama.jp/
光の表現はもちろん、スクロールで展開していくギャラリーの優雅さに目を奪われる
#TweenMax #パララックス #キレイめ #スタイリッシュ系 #シームレスページ遷移 #複数アニメーション #コラージュ #背景固定 #黒
Campus Camp | 名古屋造形大学卒展 | 大学院修了展
http://www.nzu.ac.jp/gex/2018/
スクロールしていくとだんだん背景の日がくれて行きます。フォントアニメーションも滑らかでよき。
#TweenMax #フォントアニメーション #CSSアニメーション #かわいい系 #シングルページ #CSSアニメーション #背景固定 #緑
FAZETA
https://fazetaproducciones.com/en
メニューとトップページが一体化しているサイト。下層ページのギャラリーのデザインも良い。
#Three.js #TweenMax #CSSアニメーション #シームレスページ遷移 #スタイリッシュ系 #横スクロール #縦書き英文字 #立体的
アニメーションが「良きウェブ」
カワイイが止まらない！「Vino BOY」と「Vino GIRL」で行こう！ | ヤマハ発動機株式会社
https://www.yamaha-motor.co.jp/mc/life/cc/2016/
ヤマハバイク女子！をコンセプトなサイト。コラージュ風に配置されたオブジェクトが互い違いに現れる様がかわいい
#CSS Animation #パララックス #かわいい系 #スタイリッシュ系 #フォントアニメーション #複数アニメーション #コラージュ #シングルページ
Soft Landings
https://thesoftlandings.com/
シンプルだがちょこちょこ目を惹く表現あり。文字の流れと3Dアタッシュケースがインパクトをもたらしてる。
#3D #スタイリッシュ系 #フォントアニメーション #ロゴ #Three.js #シングルページ #ドラッグ
株式会社QTnet コーポレートサイト
http://www.qtnet.co.jp/
アニメーションが結構面白いことやってる。赤と青のツートーンをベースに構成されているサイト。
#CSS Animation #パララックス #スタイリッシュ系 #フォントアニメーション #ランダム表示 #写真レイアウトが特殊
Squarespace Timeline — Squarespace
https://www.squarespace.com/about/timeline/
時系列の出来事を自動再生してくれるサイト。初期ロード時のフォントアニメーションが良い。
#CSS Animation #複数アニメーション #スタイリッシュ系 #フォントアニメーション #全画面表示 #Hammer.js #黒
真似したくなるようなテクニックがある「良きウェブ」
浜名湖体験学習施設ウォット
https://ulotto.entetsuassist-dms.com/
情報をうまくごちゃごちゃにならないようにうまくまとめられたサイト。様々なアニメーションが散りばめられているのも見どころ。
#CSSアニメーション #Canvas #連番アニメーション #かわいい系 #ロゴ
いかがでしたでしょうか。
タグ付けすることでそのサイトの表現に向きあう時間が増えるのでしばらくこんな感じでまとめていきたいと思います。
ではまた来週。
