この記事を読む

動画を魅力的に見せているサイト

国内外の動画を魅力的に見せるサイトを集めました。 動画は必ずしもメインビジュアルにだけ使われるものではなく、UXを効果的に見せる手法としても使われます。 どこでどのように使われているかに注目して見て見ましょう。 前半は海外事例で後半は国内事…

この記事を読む

【Webデザインに舌鼓をうつ vol.9】 ESTYLE,Inc. by BEES&HONEY (日本)

これはまた派手なアニメーションを付けたなーって思う、デザインでのトータルブランディングの老舗、BEES&HONEYさんが新作だしました! 毎回コーポレートサイト案件リニューアルの参考にさせてもらっています。 ESTYLE,Inc.…

この記事を読む

【Webデザインに舌鼓をうつ vol.8】 presnt by presnt (日本)

Webっぽいけどプロダクトっぽい。 そんな制作会社のポートフォリオを見つけました。 http://presnt.jp/ presnt http://presnt.jp/about 淡いブルーが爽やかなコーポレートサイトです。 アニメーション…

この記事を読む

Javascriptの慣性スクロールはSCROLL MANAGERを使う

とっても便利なススクロール系Jsを発見しました。 しかもMITライセンスときたら、使わせてもらうしかない。 では手を合わせて。いただきます。 SCROLL MANAGER とりあえず見てもらえるとわかります。 アニメーションが小気味良くて気…

この記事を読む

画像スライダーを作るのにSwiper.js以外のプラグインはもう要らない

かなり強気なタイトルですが実際に最近の案件でSwiperというjavascriptのプラグインを使っております。 もう現場ではSwiper.js以外のJsは必要ないと思います。 Swiper.jsの特徴 Swiperの特徴は下記の通りです。…

この記事を読む

【Webデザインに舌鼓をうつ vol.7】 adidas Speedfactory by Resn (ニュージーランド)

アディダスのサイトはいつもかっこいいですね。 スニーカーのブランドで一番好きなんはReebokなんやけど、サイトでゆーたらアディダスが一番かっこいい。 このサイトを制作したResnという制作会社はとっても有名。 ニュージーランドの会社なんだ…

この記事を読む

あるフロントエンド兼デザイナーの開発ツール&アプリを紹介する【厳選12個】

今年前半はとても開発に力を注いだ。そして後半は複業に力を注いだ。 にしても本当によく働いた年でした。 そこで今年、僕がWebサイト制作のチーム開発をやる上で使っていたツールを紹介します。 エディターソフトの好みはエンジニアによるけど、ここで…

この記事を読む

固定ページに投稿記事一覧を表示する【WordPressテンプレートタグ】

表題の通り、固定ページに投稿の一覧を取得するテンプレートタグは、 使用頻度が高いのに思い出せないので僕のための備忘録です。 テンプレートタグ:固定ページに投稿記事一覧を表示する 使い道:固定ページを作った際に、archive.phpにあるよ…

この記事を読む

【Webデザインに舌鼓をうつ vol.6】 SUPERCROWDS by SUPERCROWDS (日本)

無名だった制作会社がいきなりCSSDAとAWWWRDSをかっさらいました! ずっと紹介したかった。 立体感とシズル感がすごいサイトがやってきました。 SUPERCROWDS 制作会社:SUPERCROWDS 制作:SUPERCROWDS …

この記事を読む

WordPress超初心者が最初に知っておきたい予備知識

自分が始めたサービスをオリジナルのホームページで紹介したい人は多いです。 Wordpressならプログラミングの知識がなくてもオリジナルのホームページを作ることができます。 今では世界のホームページの28%がWordpressを利用して作ら…

この記事を読む

【Webデザインに舌鼓をうつ vol.5】AID-DCC by AID-DCC (日本)

今年もあとわずかになってきました。そろそろ今年つくった記事をまとめはじめています。 今年もいろんな制作会社のポートフォリオサイトのリニューアルがありました。 そこで僕が一番衝撃を受けたコーポレートサイトのリニューアルを紹介したい。 語彙力に…

この記事を読む

Adobe XDとSketchで飲食店のサイトを作る【後編】

やっとムスリム向け日本食レストラン”HALAL SAKURA”様のWebサイトを公開しました。 いやー感無量ですね!東京のクライアントを相手に大阪から初めてフルリモートで全ての工程を終えることができました。 おめでとうございます! そして前…

この記事を読む

wow.jsでスクロールアクションをトリガーにして画面に入るとフェードインで表示させる

wow.jsを使うととても簡単にスクロールアクションを設定できます。 スクロールを着火させるためにwow.jsでトリガーを設定→animate.cssを使ってアニメーションを設定。 この方程式は2年くらい使い続けていますがテッパンですね。 …

この記事を読む

jqueryを使ってレスポンシブサイトでパララックスを使う

僕が使い慣れている、一番簡単なパララックスのjqueryのプラグインを紹介します。 パララックスを使う理由 写真素材をもらってからの制作依頼はとても多いでしょう。 だから、できるだけ写真素材がいろんな角度から見えるように工夫したい→パララッ…

この記事を読む

jqueryでマウススクロールのスピードを調整する

スクロールのスピードはjaueryを使って調整することができます。リッチに見せるための表現技法としては古くからありますね。 スクロールのスピードを調整すると文章をじっくり読ませることができます。 コピペして使えるjquery [crayon…