すべての記事

最近ではWebサイトにアニメーションを取り入れるのが当たり前になってきています。 ひと昔前はフルフラッシュサイトで見かけたようなゴリゴリ動く表現がhtml5やCSS、JS・JQueryによって実装可能になりました。 今回はそんなアニメーションの表現が優れたサ...

着物や料亭、旅館、伝統文化など日本ならではのものを表現する際は、それらに合った世界観を表現するため、和風の雰囲気でデザインしているサイトが多いですね。 今回は「和風」のデザインの参考にしたい良質サイトを集めてみました。 デザインの参考にし...

せっかく優れたサイトを集めておりますので、まずはそれらをまとめた記事を書いていこうと思います。 制作事全般に通じますが、納期というのは最重要課題の1つです。納期を守るため、優先度が低い要素はカットされるなど「クオリティと納期のせめぎ合い」...

レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなし...

今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。 「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードです。「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。 細...

ひと昔前までは、ローディングアニメーションと言えばCSSアニメーションで円がクルクル回ってるだけだったり、ロゴが中央に表示されて消えていくだけだった印象ですが、今は趣向が凝ったローディングアニメーションのサイトがたくさんあります。 また、ロ...

jQueryでスライダーを実装したいけど、複雑なコードは書きたくない slickって聞いたことはあるけど、使い方がよく分からない… この記事は、slickの導入方法から基本的な使い方、さらには現場でよく使われるカスタマイズ例やトラブル対処法までを網羅した完...

人は初めて会う人の印象を３～５秒で決め、その決定材料となる情報のほとんどを「視覚情報」から得ています。 Webサイトにおいても同様で、インターネットユーザーはほんの数秒でそのサイトの判断をするということ。 私たちの脳はものすごいスピードで視覚...

当サイトに掲載する素敵なWebサイトを毎日収集していて、斜め上から見たような立体的なイメージ（アイソメトリックプロジェクション）を取り入れたサイトよく見るようになりました。 立体感があって印象的なデザインになるのでショーケースをまとめて見ま...

以前「スプリットレイアウトの参考になるサイトまとめ」という記事を書きましたが、今回は実践編として実際にスプリットレイアウトのサイトを作成していきたいと思います。 サンプル 01.スプリットレイアウトとは その名のとおり画面をスプリット＝分割す...

こちらの記事の内容は古くなっています。もっと簡単にヘッダーを固定表示できる最新の記事をアップしましたので、下記のリンクよりぜひそちらをご覧ください。 スクロールしても固定表示されるヘッダーは珍しくありませんが、その方法はいくつかあります。...

昨年くらいから見かけるようになった印象の「スプリットレイアウト」のサイト。 今回は「スプリットレイアウト」を取り入れる際の参考になるサイトをまとめてご紹介します。 スプリットレイアウトとは？ 「スプリットレイアウト」は「スプリットスクリーン...

position:sticky;はスクロールしたときに、要素が指定した位置に来たところから固定させることができるとても便利なプロパティです。 position:fixed;と似ていますが、position:sticky;ならjavascriptも書かないとできなかった難しい指定がたった2行ででき...

スクロールをセクションごとに制御してくれるプラグイン「jQuery Scrollify」は主に縦に長いLPなどでよく使用されているので、ちょこっとスクロールしただけで、次のセクションまでスルスルとスクロールしていくサイトに出会ったことがある方もいるはず。 ...

最近、下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを見かけるようになりました。例えばこちらのサイトとか↓。 KAMIMURA 特に表示領域の少ないタブレットやスマフォで活きてくるテクニックですね。実際に実装してみたいと思いま...