DAI

WEBデザインに関して、日々アウトプットしていきます。

DAI

WEBデザインに関して、日々アウトプットしていきます。

l Webデザイン　コードスニペット・Webサイトまとめ

今回はWebサイト作成・開発において、コーディングで悩むときや、手っ取り早くプロトタイプを作りたいときに便利なコードスニペットを集めた、便利なサイトを紹介します。 l コードスニペット・Webサイト CodePen 一番有名かと思いますが、世界中のプログラマーが書いたコードを共有、スキルを身につけることができます。 https://codepen.io/trending Codeply 豊富なコードスニペットが公開されていて、簡単にコードを書き始めることができます。

DAI

    • l Webデザイン　WebGL 関連デモまとめ

      今回紹介するのは、多数のアニメーションやインタラクティブなWebGL 関連デモを紹介していきます。CSSやSVGを利用した多くの有用なサンプルを参考にしたい方は是非チェックしてください。 l Ambient Canvas Backgrounds Download Source l Create an Abstract Image Slideshow with OGL, GLSL, and GSAP Download Source l Rotated 3D Lette

      DAI

      • l Webデザイン　CSS3アニメーションの実装！Webサイト/オンラインツールまとめ

        今回はCSSで書けるアニメーションをまとめたサイトやオンラインツールを紹介します。Webサイトの制作において必要なアニメーションですが、すぐ使えるサンプルをまとめているので、表現したいアニメーションが見つかるかと思います。 l Webサイト/オンラインツール CSS3 hover effects pack ホバーアニメーションをまとめたCSSライブラリ。種類が豊富。 SpinKit | Simple CSS Spinners CSS3を使って見ていて楽しいローディング

        DAI

        • l Webデザイン　スポーツ関連サイトまとめ

          今回はスポーツ関連で、デザインの参考になりそうなサイトをまとめました。個人的にはサイトを探す際に、スポーツ関連のサイト数（デザインが良い）が少ない印象を受けました。 l 紹介サイト MASTER BUNNY EDITION Nittaku(ニッタク) 日本卓球 SWANS 株式会社Nolook 横浜スポーツタウンアクセラレータ DeNAアスレティックスエリート Wheeebo 2021 SEASON TICKET ランニングチーム「enjin'」 Blue

          DAI

        l Webデザイン　コードスニペット・Webサイトまとめ

        DAI

        • l Webデザイン　WebGL 関連デモまとめ

          DAI

        • l Webデザイン　CSS3アニメーションの実装！Webサイト/オンラインツールまとめ

          DAI

        • l Webデザイン　スポーツ関連サイトまとめ

          DAI

          l Webデザイン　スクロールに連動するアニメーション

          Webサイトのフロントエンドを実装するうえで、ボタンアニメーションなどのアイディアがほしい！と言う時には、CodePenというサービスがおすすめです。ウェブ制作時、フロントエンドで使用する技術のコードの共有や外部サイトへの埋め込みができるサービスです。そんなCodePenの中でもスクロールに連動するアニメーションの効果として使えそうなアイディアをまとめてみました。 CodePenについては以前にも紹介しているので、下記からご確認ください。 l スクロールに連動するアニメー

          DAI

          l Webデザイン　スクロールに連動するアニメーション

          DAI

          l Webデザイン　制作に役立つ最新オンラインツールまとめ 02

          Webデザインに限らず、デザイン制作に役立つ最新オンラインツールを紹介していきます。お気に入りのツールを制作フローに取り入れ、制作スピードやクオリティのアップを目指していきたいです。 l オンラインツール Code Prettier CSSコードを再整形してくれるツール。 Triangle Generator 吹き出しデザインをCSSで再現、調整できるツール。 Transform Generator 立体的な回転を好みに調整できるCSSツール。 Hey Meta

          DAI

          l Webデザイン　制作に役立つ最新オンラインツールまとめ 02

          DAI

          l Webデザイン　CSSボタンデザイン / アニメーションまとめ

          今回はコピペで使えるCSSのみで実装するボタンデザインや、ホバーアニメーションを紹介していきます。汎用性の高いシンプルなボタンデザインが多いいので、参考にしてみてください。 l CSSボタンデザイン / アニメーション Creative Link Effects Simple Icon Hover Effects with CSS Transitions and Animations Creative Button Styles CSSボタンデザイン120個以上！どこ

          DAI

          l Webデザイン　CSSボタンデザイン / アニメーションまとめ

          DAI

          l Webデザイン　制作に役立つ最新オンラインツールまとめ 01

          Webデザインに限らず、デザイン制作に役立つ最新オンラインツールを紹介していきます。お気に入りのツールを制作フローに取り入れ、制作スピードやクオリティのアップを目指していきたいです。 l オンラインツール Transition.CSS 40種類以上のトランジション向けCSSアニメーションを表現できる便利ツール。 Charts.css HTMLとCSSのみでグラフやチャート図表現できるCSSフレームワーク。 Screen Sizes あらゆるAppleデバイスのサ

          DAI

          l Webデザイン　制作に役立つ最新オンラインツールまとめ 01

          DAI

          l Webデザイン　スクロールエフェクトまとめ

          Webサイトのフロントエンドを実装するうえで、ボタンアニメーションなどのアイディアがほしい！と言う時には、CodePenというサービスがおすすめです。ウェブ制作時、フロントエンドで使用する技術のコードの共有や外部サイトへの埋め込みができるサービスです。そんなCodePenの中でもスクロールダウンのデザインや効果として使えそうなアイディアをまとめてみました。 CodePenについては以前にも紹介しているので、下記からご確認ください。 l スクロールエフェクト Webサイトの

          DAI

          l Webデザイン　スクロールエフェクトまとめ

          DAI

          l Webデザイン　UIデザイントレンド/グラスモーフィズムについて

          Webサイトのフロントエンドを実装するうえで、ボタンアニメーションなどのアイディアがほしい！と言う時には、CodePenというサービスがおすすめです。ウェブ制作時、フロントエンドで使用する技術のコードの共有や外部サイトへの埋め込みができるサービスです。そんなCodePenの中でもグラスモーフィズムデザインや効果として使えそうなアイディアをまとめてみました。 CodePenについては以前にも紹介しているので、下記からご確認ください。 l グラスモーフィズム グラスモーフィズ

          DAI

          l Webデザイン　UIデザイントレンド/グラスモーフィズムについて

          DAI

          l Webデザイン　オリンピック特設サイトまとめ

          新型コロナウイルスの影響で1年の延期となった東京五輪ですが、結局のところ大会は開催される？のか否か。そうした中でも各企業がオリンピックの応援・活動の支援をしている特設サイトは数多くあります。 オリンピック向けのデザインをする上で、参考になりそうなサイトをまとめてみました。 l 紹介サイト ヤマトホールディングス株式会社 日本生命保険相互会社 チーム コカ･コーラ東京2020公式サイト ALSOK 東京2020オリンピック・パラリンピック競技大会 特設ページ TOKY

          DAI

          l Webデザイン　オリンピック特設サイトまとめ

          DAI

          l Webデザイン　バナーデザインの参考サイト

          今回は、広告バナー作成の際に参考になるギャラリーサイトを紹介したいと思います。検索幅が広いサイトが多いので、参考にしたいデザインやイメージしているバナーにたどり着けるかと思います。 l ディスプレイ広告用 Bannner.com バナーの見本になるような、優れたバナーを集めたバナーデザインギャラリー。 SAMUNE 目を惹かれる良質なデザインのサムネイルを集めたギャラリーサイト。 BANNER LIBRARY おしゃれで良質なバナーデザインをまとめたギャラリーサイ

          DAI

          l Webデザイン　バナーデザインの参考サイト

          DAI

          l Adobe XD おすすめ無料プラグイン②

          今回もAdobe XDにインストールしておくことで、快適に作業を進められる無料プラグインを紹介していきます。 l Arranger for XD 高度な並びを作れるプラグイン。 l Selection 色、線、フォント等（共通）を選択できる。 l Rename It レイヤー名をまとめてリネームや置換ができる。 l SelectMenu 共通しているオブジェクトを全選択してくれる。 l Marge Layer Photoshopでいうところの「レイヤーを結

          DAI

          l Adobe XD おすすめ無料プラグイン②

          DAI

          l Webデザイン　Photoshopのスクリプト/プラグインまとめ

          AdobeXDなどWebデザインツールとして、使いやすくなってきていますが、まだまだPhotoshopでデザインやパーツ作成をする人は多いと思います。 今回はPhotoshopの作業環境を良くする為の、スクリプトとプラグインを紹介していきたいと思います。 l スクリプト 選択範囲をシェイプに変換 選択範囲をシェイプレイヤーに変換。後からリサイズも可能 PSDデータからテキスト情報を抽出 デザインデータのテキストをデータを抽出。 テキストデータはCSVで書き出される。

          DAI

          l Webデザイン　Photoshopのスクリプト/プラグインまとめ

          DAI

          l Webデザイン　ホバー / アニメーション（イメージ）

          Webサイトのフロントエンドを実装するうえで、ボタンアニメーションなどのアイディアがほしい！と言う時には、CodePenというサービスがおすすめです。ウェブ制作時、フロントエンドで使用する技術のコードの共有や外部サイトへの埋め込みができるサービスです。そんなCodePenの中でもホバー のデザインや効果として使えそうなアイディアをまとめてみました。 CodePenについては以前にも紹介しているので、下記からご確認ください。 l ホバー / アニメーション 【IE11動作】

          DAI

          l Webデザイン　ホバー / アニメーション（イメージ）

          DAI

          l Webデザイン　カーソルデザイン / 効果

          Webサイトのフロントエンドを実装するうえで、ボタンアニメーションなどのアイディアがほしい！と言う時には、CodePenというサービスがおすすめです。ウェブ制作時、フロントエンドで使用する技術のコードの共有や外部サイトへの埋め込みができるサービスです。そんなCodePenの中でもカーソルのデザインや効果として使えそうなアイディアをまとめてみました。 CodePenについては以前にも紹介しているので、下記からご確認ください。 l マウスカーソル 【IE11動作】未対応 【

          DAI

          l Webデザイン　カーソルデザイン / 効果

          DAI