【Webデザイン】今週の「良きウェブ」(5月12日〜5月18日)
どうもです。引越し前日にブログ更新しています。
今週の良きウェブまとめです。 今週はなんだかSVGアニメーション多いなあな感想を抱く選出となりました。 うまく駆使していい感じにサイトをみせたいものです。
デザインが「良きウェブ」
BOEL Inc. ボエル | ブランディングカンパニー
https://boel.jp/ サイトのデザインはシンプルなのでテキストアニメーションの存在感が光ります。
#テキストアニメーション #スライドイン #キレイめ #白
Finesse Design Atelier | Digital & Creative Studio
http://finesseatelier.com/ 思い切りよく赤と黒をつかったドラマティックなサイト。好みどストライクなサイトです!
#ドラマチック #スタイリッシュ系 #TweenMax #デュオトーン #赤 #パララックス
伊勢丹セレクション|JAPAN SENSES
http://www.miguide.jp/japansenses/shinjuku/ 写真の和な雰囲気を大人っぽくも可愛くもあるピンクで景気づけてるサイト。シンプルな作りながらも印象に残ります。
#スプレッドスクリーン #和 #ピンク #TweenMax
NPO法人HELLOlife | Create the NEW PUBLIC
https://co.hellolife.jp/ 動画のキラキラ幻想的な雰囲気を背景に用いたサイト。動画の文字すかしにはCanvasを使っているようです。
#パララックス #pixi.js #キレイめ #黄色 #可愛い系 #インライン再生動画 #Canvas
InSymbiosis
http://www.insymbiosis.com/ 医療系のサイトのようです。WebGLを用いてメディカルな雰囲気を現しています。
#TweenMax #グラデーション #Three.js #パララックス #シームレス遷移
ギミックや発想が「良きウェブ」
MIAMI - 東京大学
http://www.sip-miami.iis.u-tokyo.ac.jp/ 縦横無尽に動き回る立方体、ちゃんとサイトの名前を形成したり崩れたりを繰り返しています。
#Three.js #シームレス遷移 #カラフル #白
MOUTAKUSANDA!!! magazine [モウタクサンダ!!! マガジン]
http://moutakusanda.com/ ぶっ飛んだサイトすぎて正直タグ付けに困りました。とにかく訪れて中身を見てみることをお勧めします。
#Hammer.js #ポップ #爆発エフェクト #白 #ホバーアニメーション #劇薬
PLASTICTOKYO
http://plastictokyo.jp/ トップのグリニッチな表現も素敵ですが、Conceptページのテキストアニメーションも見ものです。
#テキストアニメーション #グリニッチエフェクト #キレイめ #ボックススライド
株式会社ココノヱ - coconoe inc.
https://9ye.jp/ とにかく芸が細かいサイト。特にホバーアニメーションが楽しいです。(確か昔はコンソールでテトリスゲームができたはずなのですが、今は見れないみたい?)
#ピンク #ホバーアニメーション #可愛い系 #
DreamTeam Katarzyna Konkowska
http://dreamteam.pl/ ページの遷移の仕方が圧倒的にドラマチック。
#テキストアニメーション #ダイナミック #キレイめ #青緑 #TweenMax #Three.js #シームレス遷移
#Art4GlobalGoals – 17 Issues Interpreted by Leon Löwentraut in His Art
https://art4globalgoals.com/en 閲覧したいページを筆でなぞることで遷移できるという、絵描きごころをくすぐる作りになってます。
#TweenMax #ダイナミック #固定背景スクロール #スタイリッシュ系 #ドラッグ操作
アニメーションが「良きウェブ」
Studio MOTIO ® – Design interactif et développement web à La Rochelle
https://www.studiomotio.com/ 円形状に広がる、描くモーションを基調としたスタイリッシュなサイト
#テキストアニメーション #スライドイン #スタイリッシュ系 #黒 #円形アニメーション #パララックス
wrk - French Creative Web Studio
https://waaark.com/ こちらは波打つモーションを基調としたスタイリッシュなサイト。SVGを用いて軽快にみせています。
#TweenMax #シームレス遷移 #SVGアニメーション #可愛い系
homunculus Inc. | 株式会社ホムンクルス
http://homunculus.jp/ 独特の演出が光るホムンクルスさんのサイト。気になってコンソールを開いてみると。。。な仕掛けもあります
#Three.js #シームレス遷移 #キレイめ #白 #ホバーアニメーション
Super Duper Studio
https://www.superduper.wtf/ 最初はシンプルですが、スクロールするとダイナミックに動き出します。
#SVGアニメーション #パララックス #キレイめ #グラデーション #シングルページ
株式会社コトノバ
http://www.kotonoba.co.jp/ 「コトノバ」の文字の中をうねうねと動くアニメーションが特徴的。最初と最後にヒーロービューを見せる、という構成はシングルページサイトでも珍しい印象。
#SVGアニメーション #シングルページ #キレイめ #白 #TweenMax #背景固定スクロール
POGG | スイートポテトパイ専門店
https://pogg-sweetpotatopie.com/ つかもとさんがツイートしていたサイトです。なだらかなテキストアニメーションやシームレス遷移、重くないインライン再生動画など、参考になる点が盛りだくさん。
#テキストアニメーション #スライドイン #キレイめ #紫 #TweenMax #SVGアニメーション #インライン再生動画 #シームレス遷移
真似したくなるようなテクニックがある「良きウェブ」
Abschluss HSD Sommersemester 2017
http://abschluss-hsd.de/ フォントの存在感がある一枚ペラのサイト。
#ホバーアニメーション #スプレッドスクリーン #カラフル #シングルページ
Jacob Sutton
http://jacobsutton.com/ 作品が切り替わるごとにタイトルも切り替わる仕組みのサイト。カテゴリごとでフィルター的な役割も果たしている模様。
#Hammer.js #スケールイン #シームレス遷移 #グレー #インライン動画再生
Whitelist
http://whitelist.tv/ 虹色の背景が美しいサイト。ページトップのテキストアニメーションが個人的にきになる。
#Pixi.js #スライドイン #キレイめ #シームレス遷移 #虹色 #スライドイン #テキストアニメーション
いかがでしたでしょうか。 最近は意図的にwebサイト収集ペースを減らしています。 まあただいろんなサイトをみるのは嫌いじゃないのでつい色々見たときにガーッと呟きまくることもあるのですが。 その分よりいいインプットになるサイトかどうかアンテナ貼っていきたいと思います。
ではまた来週。
【Webデザイン】今週の「良きウェブ」(5月6日〜5月11日)
どうもです。なんとか生きてる今日この頃です。
今週もWebサイトまとめです。 今回は結構カテゴリーが似てるサイトが集まってるので、カテゴリーでサイト比較などができたりするかと思います。 それでは以下からどうぞ。
デザインが「良きウェブ」
渋谷 シェアオフィス x コワーキング | Connecting The Dots
シンプルですがキレイに整ったサイト。ところどころに赤色を忍ばせているのがアクセントになっています。
#ジャーナル風 #フェードイン #キレイめ
クリエイティブメモメモ
要所にこだわりが詰まってます。フォントや色合い、アイコンの形まで統一感が気持ち良い。
#ジャーナル風 #フェードイン #キレイめ #かわいい系 #ブログ
株式会社エアー.プラス
思わず「かわいい!」と悶えたサイト。ブログ楓なレイアウトですが、写真の配置や背景イラストなどをうまく用いてるおかげで可愛さに目がひく。
#ジャーナル風 #canvas #キレイめ #かわいい系 #背景固定 #イラスト
ギミックや発想が「良きウェブ」
Serpentiform
https://www.serpentiform.bulgari.com/en/home
ご存知ブルガリのダイナミックなサイト。蛇の蛇行のような動きをするスクロールアニメーションが粋。
#ゴージャス #Three.js #キレイめ #Pixi.js #パララックス
LattexPlus Festival 2017
http://festival.lattexplus.com/
レイヤーがどんどん開かれていく様はなかなかユニーク。文字打ちアニメーションはちゃんと一個一個バラしてできてます。
#カラフル #Three.js #クール系 #フォントアニメーション #パララックス #シングルページ
BATON PASS | バトンタッチ | JAL企業サイト
http://www.jal.com/ja/outline/brand/baton/
スクロールを利用した行程の説明アニメーションがすごい!要所でSVGアニメーションを使っているのも相性が良いです。
#SVGアニメーション #TweenMax #キレイめ #パララックス #シングルページ
DELAUNAY(ドロネー) - Web construction unit based in Tokyo.
マウスに合わせてウネウネ動く背景はスクロールすると弾け飛びます。優雅です。
#キレイめ #シンプル #ホバーアニメーション #Canvasアニメーション #シングルページ
ESPALMADOR MARISQUERIA|エスパルマドール マリスケリア|仙台
http://www.tf-corp.co.jp/espalmador
ファーストビューのインパクトがピカイチ。全体を通して伝わるバカンス感が心地よい。
#キレイめ #カラフル #かわいい系 #パララックス #Canvasアニメーション #ホバーアニメーション #シングルページ
アニメーションが「良きウェブ」
201˚
有機的に動く要素のアニメーションが特徴的。スクロールすると画像が完成するなど、工夫も色々。
#パララックス #キレイめ #シームレス遷移 #インライン再生動画 #円形アニメーション
Type Terms
https://www.supremo.co.uk/typeterms/
タイポグラフィの基礎的なことを解説しているサイト。フォントとSVGの相性が良い。
#シングルページ #青 #フェードイン
fillab - FILが運営するファブ・スタジオ
下から上へスライドカバーしていくサイト。下層ページに遷移すると次のページへ移動するようになっているのも特徴的
#パララックス #キレイめ #シームレス遷移 #インライン再生動画 #円形アニメーション
株式会社グッドライフ | 一歩先のオフィスをご提案します
コマ撮りアニメーションのような動きが随所に見られるおかげで企業サイトの堅苦しさが緩和されてる例
#パララックス #スタイリッシュ #ロゴアニメーション #TweenMax #インライン再生動画 #イラスト使用
Blocksphere
デジタルっぽさを感じられるデザイン。ものすごくスムーズに動きます。
#パララックス #スタイリッシュ系 #シームレス遷移 #全画面スクロール #フォントアニメーション
Luc Dandrel
黒を基調としたスタイリッシュなポートフォリオサイト。
#TweenMax#Vue.js #シームレス遷移 #ボックススライドイン #スタイリッシュ系 #黒
札幌円山のコンディショニングジム&パーソナルトレーニング FORH
ボックススライドインアニメーションの好例。
#パララックス #グラデーション #SVGアニメーション #ボックススライドイン #インライン再生動画
Top Paddock
文字が浮遊するのが楽しいサイト。スクロールで画像がもにょんと動くのは珍しいです。
#パララックス #TweenMax #smooth.js #フェードイン #シングルページ #ボックススライドイン
真似したくなるようなテクニックがある「良きウェブ」
FLOWER AQUARIUM BY NAKED Secret sea
http://www.aqua-park.jp/special/floweraquariumsecretsea2018/
幻想的な森の中を歩いているような気分になる、雰囲気を上手く見せたサイト。
#パララックス #奥行き #3D展開アニメーション #フェードイン #シングルページ #ボックススライドイン
POINT EDGE ShibuyaBASE
http://www.pointedge.work/shibuya/
時折出てくるくるくると回る四角形がポイント。
#パララックス #フェードイン #シングルページ #CSSアニメーション #シンプル
株式会社CRAZY(株式会社クレイジー) | CRAZY,Inc.
ファーストビューにインパクトのあるサイト。ボックススライドするアニメーションを基調として展開して行きます。
#パララックス #フェードイン #キレイめ #全ページスクロール #CSSアニメーション #ボックススライドイン
いかがでしたでしょうか。 早いもので5月になってしまいましたが、1月末から収集し始めてきた良きWebサイト、おそらく300超えたかなと感じている今日この頃です。 (一日3個ずつ見つけているので、毎回の記事で21個ずつと換算して単純計算したらそれくらいあるかと) ちりつもとはよく言ったものです。 6月以降は少し方向を変えたいと考えています。
ではまた来週。
【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 #連番アニメーション #かわいい系 #ロゴ
いかがでしたでしょうか。
タグ付けすることでそのサイトの表現に向きあう時間が増えるのでしばらくこんな感じでまとめていきたいと思います。
ではまた来週。
【Webデザイン】今週の「良きウェブ」(4月21日〜4月27日)
どうもです。自分の誕生日がすぎるとだいたいあったかくなります。
今週も良きウェブまとめです。
今週はやたらと自分好みのデザインを見かけまくった記憶があります。
割と面白いレイアウトやアニメーションの動きをしているものが好きなんですよね。
それでは今週も見ていきましょう。
デザインが「良きウェブ」
meme mag ミームマグ
https://www.mememag.me/
可愛くてスタイリッシュなウェブマガジンサイトです。
様々な形をした記事コマでポップな印象に。
FINLAYSON | フェリシモ
https://info.felissimo.co.jp/finlayson/
北欧テキスタイルをモチーフにした商品シリーズとあってテキスタイルがデザインのポイントとなっています。
固定位置背景やマウスオーバーするとふるふる震えるテキスタイルの画像も可愛い。
Defining the future of web design | Webflow
https://webflow.com/web-design
各テーマに合わせてセクションのデザインを変えているのがとてもおしゃれ。
スクロール次第で動きが変わるのも観察しがいがあります。
Razzle Dazzle
http://www.razzledazzletorino.com/
白黒ボーダーにビビッドな青や黄色がいい味を出している、なかなかにせめている地図です。
むしろ、地図はサブ的な役割でイベントにフォーカスしてもらうためにあえてこういうデザインにしているのかも。
The Outline
https://theoutline.com/
こちらも色合いのインパクトが印象的なウェブサイト。
後半部あたりにあるホバーによって並び方が変化するエリアの動きが個人的に好き。
ふじきみつ彦 - mitsuhiko fujiki
http://fujikimitsuhiko.com/
PCとSPでサイトのレイアウトがだいぶん違うので、是非とも2つ見比べて見て欲しいサイト。
フィルタリングすると色がブワッと変わるのも楽しい。
クロニクル、クロニクル! — もしかしたら一度起こったことでそれで完結するものなんて何もないんだ。
http://www.chronicle-chronicle.jp/
このサイトを初めて見たのは一年くらい前の話なのですが、最初はなぜレイアウトを繰り返して流のかがわからなかったです。
単純にこの展覧会のテーマである「繰り返し」を、サイトで持ってして表現していただけの話でした。納得。
NORTH FLAGGERS | 利尻島PR漁師団体 公式サイト
https://northflaggers.com/#/
ファーストビューに動画を使い、シンプルでスタイリッシュなレイアウトをしたこのサイト、なんと漁業のサイト。
写真をメインに据えたレイアウト構成にしているおかげで、漁の雰囲気や今のデザインらしさも醸し出せています。
Maison Riviera - Yogurts, Cheese, Butter and Sour Cream
https://riviera1920.com/en/
華やかさを具現化したかのようなサイト。
固定背景で所々花が置かれてるのもとても可愛らしい。
ギミックや発想が「良きウェブ」
Célia LOPEZ - Interactive & 3D designer
http://celialopez.fr/
3Dデザイナーさんの作品ということもあって独特の空間にいるようなサイト。
Three.jsで作られた球体をクリックすると詳細が展開される様子は優雅です。
GEO @ H. Lorenzo
https://s3.amazonaws.com/geohlorenzo/index.html
固定メニューなんて最初からなかったんや!と思わせる浮遊しまくってるサイトです。
こういうせめているデザインはコンテンツを選びますがファッションなどの目新しさ重視なものとはとても相性が良い。
cytus2
https://www.rayark.com/g/cytus2/
音ゲーらしいサイバー感と異空間が良い。
こちらは是非ともPCで見るのをお勧めします。
奥に進んでいくように展開していくページ、キャラごとのディティールのあしらいも素敵。
INRA | Faits marquants
https://faits-marquants.inra.fr/
まるで異次元の世界みたいな眩い輝きに包まれた3D空間。
こういったものを見るとWebGLは職人芸だなと感じてしまいます。
Niika
https://www.niika.com.au/
様々なオブジェクトがびゅんびゅん飛び交うサイト。
スクロールすると連番で動かしている模様です。WebGLは特に使ってなさそう。
アニメーションが「良きウェブ」
Millennials Are Screwed - The Huffington Post
https://highline.huffingtonpost.com/articles/en/poor-millennials/
ネオンのきらめきが映える黒字ベースのページ。
PCで閲覧するのが個人的にお勧め。
Shop - Simply Chocolate : Simply Chocolate
https://simplychocolate.dk/
pixi.jsを使って表現されたチョコのシズル感が良い。
最近下層ページ同士間でページ遷移がしやすいサイトをよく見かけます。
Toggl - Free Time Tracking Software
https://toggl.com/
3Dなイラストがこしらえられたポップなサイト。
ブランドの名前の通り、トグルするとページの表現の表情が変わるのがあって楽しい。
Geex Arts – Creating the Most Impressive Websites
https://geex-arts.com/
細切れになって現れるオブジェクトの動きが滑らかですてき。
個人的には縦書きベースで構成されたメニューの見せ方が一番好きです。
「ぶんぐまる」上尾・飯能・坂戸・東大和の格安オフィス用品・文房具店
http://bungumaru.com/
ずらずらと文具が流れてくる姿がインパクト大。しかしどこか可愛らしい。
文字が起き上がりながら現れる動きが個人的に好き。
Mathery
http://mathery.it/
CSSアニメーションで作られたタイトル部分のぴょこぴょこしたアニメーションが可愛い。
PCで見た場合のホバーアクションもインパクトあります。
Digital design & art direction — Barcelona | Xavier Cussó
https://xaviercusso.com/#/
パキッとした色合いと長方形のモーションが絶妙にいい味を出しているサイト。
ローディングの見せ方からページ遷移の瞬間まで隙のないかっこよさに憧れます。
真似したくなるようなテクニックがある「良きウェブ」
P5 - ペルソナ5 - 公式サイト
http://persona5.jp/
ゲームでもアニメでもおなじみのペルソナ5。
刺激的な勢いのデザインを助長するようなアニメーションの動きは見ていてワクワクしてきます。
いかがでしたでしょうか。
ウェブサイト収集を始めて個人的に感じていることとしては、ヨーロッパのウェブサイトほど熟練されたWebGL表現をしているサイトが多いなということです。
あと、だいぶん自分でも「このサイト見たことあるような。。。?」というのがだいぶ多くなってきたので、
そろそろギャラリーサイト作ろうかなと思ってます。
ではでは。
Gulpと仲良くなるためにまとめたメモ
ついに弊社フロントチームにもwebpack化の波がきました。
それまではgulpをベースとして開発環境を構築しておりましたが、
いろいろとwebpackの方が利便性が高いということで、だそうです。
というわけで。
案件で初めてgulpファイルを書くことになってその時に色々まとめたメモを
弊社gulp追悼の意を込めて公開しておこうと思います。
Gulpとは
・ビルドシステムヘルパー、またはタスクランナーと呼ばれるnode.jsツール
・タスク=ビルドと考え、登録されたタスクを実行していくもの
・複数のビルド処理(コンパイル処理)が必要なものをそれぞれ依存関係を極力減らして動かせるやーつ
・node.jsの強みを生かしたストリーム処理で動くのが特徴、とのこと。以下参考
qiita.com
gulpfileを書く
・基本的には「task()でタスク登録してseries()かparallel()かを指定して動かす、とまずは覚えておく
・どんなことできるか全部知りたい人はここ見てね(英語)
github.com
・ES6でgulpfile書こうとする時はBabel噛ませる必要がある。以下参考。
tacamy.hatenablog.com
拡張機能について
・まず、gulpで使える拡張機能は
1. 「gulpの拡張機能で提供しているもの」
2. 「node.jsの機能として提供しているもの(npmパッケージ)」
の2つがある。
・gulpの拡張機能でもやばいやつに関してはBlaklistとしてまとめられているので、gulpの拡張機能として存在したとしても使わない方がいいやつに関してはチェックすること
plugins/blackList.json at master · gulpjs/plugins · GitHub
参考になる入門記事
入門記事などとしてはここら辺読むと良い(きがする)
app.codegrid.net
ics.media
blog.anatoo.jp
qiitaに載せようか否か迷ったんですけど
基本的に自分のメモがリンクばっかなので
サイトのリンクとかいい感じの見た目で貼れるはてブの方で書くことにしたのでした。
【Webデザイン】今週の「良きウェブ」(4月7日〜4月13日)
どうもです。今は春なのか冬なのかわかりません。
今週も懲りずに良きウェブまとめです。
この時期は新卒採用シーズンということで何個かそれ系のサイトも含んでますが
まあいつも通り個人的に気になってものを中心にまとめています。
デザインが「良きウェブ」
132 5. STANDARD | ISSEY MIYAKE INC.
https://www.isseymiyake.com/1325/standard/
三宅一生の新しいブランドのサイト。
服のコンセプトが平面から立体へ、立体からその先へ、という思いを込めていることもあってか
ロゴやメニューのデザインがフラットだったり、実際に服のコンセプトを伝えるための見せ方の工夫がこしらえられています。
J Dilla Changed My Life
http://jdillachangedmylife.com/
このインパクトで一枚ページはなかなか存在感あります。
ファーストビューのvideoで興味を引きつけて、全体スクロールする視聴エリアで音楽に集中させる構成になっています。
メリハリがはっきりしているサイトです。
Max Kaplun
https://maxkaplun.com/
私のブログでは結構この手のデザインのサイトはよく取り上げているので珍しみがないかもしれませんがw
こちらは文章の途中にリンクがところどころ入っているタイプです。
手書きっぽい文字がところどころサイトの説明で入ってるのも可愛い。
Millemann Consulting - Des solutions éthiques et responsables
https://www.millemannconsulting.fr/fr/consulting/quintessence
日本語で縦書きはたまにみるので珍しいとは言えませんが、英文字で縦書きは逆に目を引きます。
下までいくと自動遷移しますが、その際の見せ方も艶があって良いです。
Will Mayer - Director (among other things)
http://willmayer.com/
背景に邪魔にならない程度にスクラッチノイズが入っており、それが逆に心地いいサイトです。
作品事例のムービーのUIは個人的に珍しくて参考になります。
Film Truck
https://www.filmtruck.co/
書体や配色の雰囲気がレトロですが、ムービーのおかげで今っぽく感じるネオレトロなサイト。
ホバーアクションな仕掛けもところどころあるのでPCでもみるとよいかも。
HEROs - Sportsmanship for the future -
https://sportsmanship-heros.jp/
大胆なまでにデュオトーンの写真を使ったサイトです。
スポーツスピリッツに赤と青はよく映えることを痛感するデザインです。
Frans Hals Museum
https://www.franshalsmuseum.nl/en/
PCでみる際はタイミングずらしたダブルパララックスイメージを、スマホで見るときはまるでアプリのようにわかりやすいUIに注目して欲しいです、
こんな楽しいミュージアムサイトあると、美術館行こうかなとか思っちゃいますね。
ギミックや発想が「良きウェブ」
Ghost | Augmented Reality Headset | A New Digital Experience
http://ibelieveinghost.com/
商品説明のお手本とも言えるサイト。
実際にこのサイトを見ていてこの商品すご!というのが伝わってきました。
モヤモヤ〜としているところにwebglを用いて表現しています。
HAJIME WATANABE / 渡邉肇
https://hajimewatanabe.jp/
写真家さんのポートフォリオサイトです。
正直ページ導線が慣れていない人にとっては難しいかもしれませんが
世界観の表現としてこんなに水面、波紋の作り込んでいるサイトはなかなかないかも。
インターネットの歴史 History of The Internet - Yahoo! JAPAN
https://internethistory.yahoo.co.jp/rich/index.html
インターネットの歴史を塔にしました!なサイトです。
塔のオブジェをクリックすると詳細が見れるのはもちろん
サイドに行きたい年代にジャンプできるサイドバーもちゃんと備えており、UIもしっかりとしたサイトです。
Howlt
http://howlt.com/
ちゃんと閲覧している時間帯によって明るくなったり暗くなったりするサイト。
サイトの入り口が街の風景イラストなのもなんか可愛い。
ADK RECRUIT 2019
http://www.adk-recruit.jp/index.html#
ダイナミック。その一言に尽きます。
赤ベースなので元が目立つんですが無限に広がるような社員たちのマップもなかなかに凄みがあります。
アニメーションが「良きウェブ」
契約社員採用|リクルートライフスタイル RECRUIT LIFESTYLE
https://www.recruit-lifestyle.co.jp/recruit/keiyaku/
まるで日本ドラマの番宣ポスターみたいなファーストビュー。ポップ&スムーズな雰囲気に仕上がってます。
個人的に下位ページの文字の現れ方がスムーズで好きです。
ヘアケアメーカー ナプラの リクルート(採用情報)サイト
https://www.napla.co.jp/recruit/
新卒採用サイトらしくフレッシュで清潔感がある印象。
アニメーションでプラススタイリッシュな雰囲気を添えています。
個人的には枠を囲む動きが好きです。
ブラザーブランドコンテンツ|企業情報|ブラザー
http://www.brother.co.jp/corporate/brand/
こちらはスマホでも見れますが、PCでみることをおすすめ。
スクロールした時のアニメーションの躍動感に驚かされます。
各ページの要素を見ていくのが楽しいです。
KAWANO | セレクトショップ
http://www.kawanoshinjuku.com/
めちゃくちゃ優雅です。サイトデザインと雰囲気にあった速度とフェードの仕方をしたアニメーションが心地よい。
ブランドの高級感をグッと助長しています。
Brontide
https://www.brontidebg.com/home
横スクロールで展開していく絵巻物ムービー的なサイト。
このサイトの奥行きとゆったりとしたスクロールの動きのおかげでナチュラルな雰囲気がグッと引き立てられている印象。
The Shift
https://theshift.tokyo/ja/
シフト、という名前だけあってか、オブジェクトの位置がジグザグだったり、文字の位置が不思議な感じだったり、デザインは名を表している状態です。
projectページの背景スクロールは面白いですよ。
真似したくなるようなテクニックがある「良きウェブ」
Max Allouch - Creative Designer Portfolio
http://maxallouch.fr/
PCで閲覧推奨なポートフォリオサイトです。
ムービーカルーセルから詳細ページへ飛ぶ時のアニメーションの見せ方が個人的に好き!
ELIN
https://elinjp.com/
シンプルなファッションサイトですが、ふわふわとイメージが浮いているように見えるのが印象的です。
背景のテクスチャを固定背景にすることで府中間に説得力を持たせています。
いかがでしたでしょうか。
新卒サイトはやはりより印象的な会社に見えるように演出をしっかり凝っている印象でした。
デザインに説得力を持たせる実装ができるように参考にしようとおもいます。
ではまた来週。
【Webデザイン】今週の「良きウェブ」(4月1日〜4月6日)
どうもです。いつの間にか4月になってました。
今週も良きウェブまとめです。
今週は、おしゃれでスタイリッシュなウェブサイトを探している!という方でこのブログに行き着いた方にとってはご期待に添えない内容となっています。
今回は「もっと遊びのあるものを見てみようー」をテーマにお送りします。
というのもこの週はエイプリルなフールがあったのと
私自身が結構codepenを漁っていたということもあり
割と面白表現やクリエイションにフォーカスしたものが多めになっているからです。
まあたまにはこういうのもいいかなということで。
- Webサイト編
- Webクリエイション編
Webサイト編
デザインが「良きウェブ」
居酒屋 源
http://izakaya-moto.jp/
スマホやタブレットなどのモバイルデバイス向きなのがドラッグタイプのデザイン。
下手したらどこに行けば目的の情報があるのかわからない!となりやすいのですが、このサイトは最初のナビがあるおかげでまだわかりやすい印象です。
あったかみのある手書きイラストとアクセントのアニメーションが良き。
ギミックや発想が「良きウェブ」
A When to Travel Guide for Japan Burma Vietnam Cambodia Laos
https://www.insideasiatours.com/when-to-travel
この国にはいつのタイミングで行けばいいの?を教えてくれるサイト。
この切り口で旅行を紹介してるのは珍しいかもーと思いました。
Crypton
https://crypton.trading/
スクロールで説明文がキーボード打ちで浮かび上がってきたり、図がするするーと展開されているサイト。
よく見ると左上のアイコンがスクロールに合わせて喋ってるようになってます!
ロボットが説明してくれているみたいな気分になるサイトです。
Playground
https://playground.labs.caffeina.com/#
Three.js製のバスケし放題なサイトです。
趣の異なる3ステージが選べますがそれぞれリアリティがすごいので思わずボール投げまくってました。
アニメーションが「良きウェブ」
三井住友銀行 Recruiting 2019
http://www.smbc-freshers.com/#top
手書き文字がサラサラ〜と現れるのが素敵。
メッセージを訴える表現としては、例えばフォントを強いものにするとかが考えられますが
じわっと訴えかける表現をしたい時にはこうやってアニメーションが助力するケースもあるという学びが得られました。
Zoomanity
http://zoomanity.land/en/
PCでみてね!と言われるのですがみた方がいいです。
イラスト×パララックスの好例です。
エイプリルフールで見かけたもの編
【楽天】公式キャラクター変更のお知らせ
[
https://event.rakuten.co.jp/okaimonopanda/point-goods/april2018/
正直楽天のECサイトは見にくいなと感じているんですけど、パンダのサイトは基本ほんわか可愛い感じです。
4月1日に仕掛けてきたサイトもやっぱり可愛い。
星のワドルディ25周年
http://www.kirby.jp/25th/waddledee/
カービィの名ザコキャラ?と呼ばれるワルドディメインサイトが4月1日爆誕。
もともとのカービィのサイトを踏襲して作られています。
個人的にトップに戻るスクロールとキャラ紹介のページは見ものです。
番外編:ポケモン関連のサイトを他にも見てみた
ヤドン県のサイトをみていてリンク踏んだり色々したら
ポケモン関連のサイトはとりあえず愛に溢れているということと
演出やデザイン的観点から見ても参考になりそうな要素があったので
おまけでちょと載せてみます。
ヤドンパラダイス
http://www.pokemon.jp/special/yadon_paradise/
正直ヤドンにそこまで思い入れはなかったんですけど、
このサイトみてヤドンの愛らしさに少し共感をもてたような気がするようなそうでもないような。
それはさておき、このサイトの動きの付け方は細かいこだわりが感じられますので触って見るのはありです。
プロジェクトイーブイ | ポケモン
http://www.pokemon.jp/special/project_eevee/
正直イーブイにそこまで思い入れはなかったんですけど、
このサイト見てこの世にイーブイガチ勢という派閥が存在するんだということはよく伝わってきました。
それもさておき、こちらもイーブイの可愛らしさを助長するような動きの付け方をしているので見ものです。
うどん県×ヤドン「ヤドンパラダイス in 香川」- うどん県
https://www.my-kagawa.jp/yadon-ken/
4月1日から1日経って公開された、香川県とヤドンのコラボサイトがこちら。
エイプリルフールの時に比べるとこっちが本丸だよ感がひしひし伝わってくるので、
これを見るとなぜ4月1日のサイトがシンプルだったかの理由が見える気がします。
ところどころに固定位置背景をかませているのが可愛い。
Webクリエイション編
a flurry of cherry blossoms
codepen.io
お花見チャンスを逃してしまった方へ送る作品がこちら。
水面上に浮かぶ桜の花びらってとてもロマンチックですよね。
Cherry Fizz
codepen.io
こちらはどちらかというと「毒かわいい」というワードが合いそうな印象。
動きとしてはシンプルですが、彩りやスピード感のおかげで印象的です。
Moving Oriental Flower Pattern
codepen.io
これCSSだけで動いています。
hoge-gradientはなかなかに色々な表現ができるので楽しいですね。
CSS Atomic Logo
codepen.io
こちらもCSSだけで動いているロゴです。
このロゴ一応リンクになっているのですが、飛び先もなかなかかっこいいサイトなのでぜひ。
Weather Icons
codepen.io
SVGかと思ったらどうもCSSで書いている模様。
やろうと思えばCSSでも表現は可能みたいです。
Pac-Man Loader
codepen.io
なぜか一時期やたらパックマン作品が紹介されていました。
これもその中の一つです。
Canvas Fireworks
codepen.io
canvas製の夏っぽい花火打ち上げ作品。
パラメータ調節で速さや大きさも変えられます。
Interactive Canvas Text
codepen.io
急にざーと球が動き出したかと思いきや。。。
ちなみにテキスト形成後はぼかぼか壊せます。
Animated canvas backround
codepen.io
サイト背景とかに使えそうなcanvasの動く背景。
オブジェクトを変えるだけで雰囲気を色々変化させられそうです。
morphing shape with spinning color stroke (svg + canvas)
codepen.io
ローディングアニメーションとかにも向いてそうなサンプルです。
個人的にSlackのローディングの動きに近しいものを感じます。
いかがでしたでしょうか。
今日はいつもと違う感じで色々見ていましたが、
とりあえずわかったこととしては、ポケモン関連のサイトは愛を表現するのがうまいサイトが多いなと感じた次第です。
(サイトデザイン、動きの付け方とかも)
キャラクターコンテンツメインのサイトはいかにそのキャラの雰囲気らしさ、またはその雰囲気を助長する見せ方ができるかが勝負所のようです。
ではまた来週。