2022年1月：デザインの参考にしたい魅力的なWebサイト14選 | Web Design Trends

2022/01/12 163 users ヒント トレンド 参考 好み デザイン

2022年1月の最近見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つかったりするなど、様々なメリットがあります。ぜひ自身の好みに合うような素晴らしいWebサイトを探してみてください。 2... 続きを読む

2022年に流行するWebデザインの最新トレンド10個まとめ | Web Design Trends

2022/01/05 316 users webデザイン 最新トレンド10個まとめ ミニマリズム 事例

2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWebデザインの10個の最新トレンドをご紹介したいと思います。1つ1つのトレンドごとに実際のWebサイトの事例を掲載している... 続きを読む

FigmaでWebサイトのデザインから公開まで完結するプラグイン「Makers」が登場！ | Web Design Trends

2021/11/02 114 users figma MAKERS プラグイン ノーコード ツール

先日、「Makers」というFigmaでWebサイトのデザイン制作から公開まで完結することができるプラグインが発表されました。 ノーコードでのWeb制作は非常に注目を集めている分野であり、実際にノーコードでのWeb制作も広まってきています。そんな中登場するMakersはどのようなツールなのでしょうか。 今回は、Makersという... 続きを読む

そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends

2021/09/09 225 users WebP ウェッピー トラフィック PNG JPEG

WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います... 続きを読む

CSSだけで作れる！背景パターンや模様のサンプルコードまとめ | Web Design Trends

2020/08/27 227 users CSS background-imageプロパティ 模様

CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが... 続きを読む

2020年版：誰でもプロ並みの配色が作れる！便利な配色パターン見本サービスまとめ | Web Design Trends

2020/07/28 671 users 配色 プロ並み 要素 デザイン 初心者

配色はデザインにおいて重要な要素の1つですが、優れた配色を作る方法が分からないという方も多いのではないでしょうか。 そこで、今回は初心者の方でも優れた配色ができる配色パターン見本サービスをまとめました... 続きを読む

Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends

2019/11/12 115 users Lottie ネイティブアプリ Airbnb Uber メイン

Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非常におすすめのライブラリです。 GoogleやUber、Walgreensなど世界の有名企業も自社アプリケー... 続きを読む

最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends

2019/08/07 508 users Drama Sketch プロトタイプ アニメーション 作成

Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきま... 続きを読む

【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends

2019/03/21 96 users BEM OOCSS SMACSS CSS設計手法 特徴

CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの... 続きを読む

おしゃれな配色パターンが見つかる！配色見本サービスまとめ | Web Design Trends

2019/02/13 72 users 配色パターン

2色の配色パターン見本 まず最初にご紹介するのは2色の配色パターン見本サービスです。2色の組み合わせは配色の基本ですね。まずは2色のベースとなる配色を決めて、そこから次の色を探すようにするとイメージに合った配色を作りやすくなります。 Khroma Khromaは、好みの色を自分で選ぶことで人工知能があなたに合った配... 続きを読む

2019年に流行するWebデザインの最新トレンド18個まとめ | Web Design Trends

2018/11/27 653 users 手法 トレンド webデザイン 変化 Webサイト

そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか？ 最新のWebデザインのトレンドを取り入れることによって、Webサイトを魅力的に見せることができたり、使いやすいWebサイト... 続きを読む

2018年版：パララックスを簡単に実装できるおすすめプラグイン8選 | Web Design Trends

2018/10/04 72 users パララックス ライブラリ WEBサイ プラグイン デザイン手法

パララックスは、様々なWebサイトで取り入れられているデザイン手法で、ユーザーを楽しませたりサイトを魅力的に見せたりなど様々な効果を発揮します。 Webサイトでパララックスを実装するためのプラグインやライブラリは様々なものが公開されており、それらを利用することで初心者の方でも簡単にパララックスをWebサイ... 続きを読む

2018年最新！Webデザインの学習におすすめの書籍24選 | Web Design Trends

2018/08/21 68 users 学習 webデザイン デザ CSS 2018年最新

Webデザインの学習を行う上でおすすめの書籍を下記のテーマ別にまとめました。 デザイン基礎知識 Webデザインの基本 HTML/CSS/JavaScript CSSテクニック デザインテクニック デザ... 続きを読む

2018年版：おすすめの人気UIデザインツール徹底比較 | Web Design Trends

2018/08/20 83 users 2018年版

日々新たなデザインに関するニュースが飛び交っていますが、それはUIデザインツールに関しても同様です。 Adobe XDの正式リリース、Figma3.0のリリース、InVision Studioのベータ版公開など、2017年の終わりから2018年にかけて多くのUIデザインツールが登場しました。 今回は、2018年8月現在で公開されているUIデザイン... 続きを読む

ブーム到来か。ノングリッドデザインの魅力と参考になるWebサイト | Web Design Trends

2018/07/23 88 users ブーム到来 既存 従来 テキスト 個性

既存の枠に囚われず、自由に画像やテキストをレイアウトする「ノングリッドデザイン」のWebサイトがここ最近で多く見られるようになってきました。 近年オリジナリティがWebデザインに強く求められるようになってきていて、従来のルールに従わず、個性を強調したようなWebサイトが増えてきていますが、ノングリッドデザ... 続きを読む

「STUDIO」がついに正式版をリリース！作成したデザインをそのままWebサイトとして公開可能に | Web Design Trends

2018/04/03 118 users Studio インターフェイス かたち デザイナー リリース

STUDIOとは STUDIOとは、STUDIO株式会社が提供する国産デザインツールです。「アイデアを誰でもカタチに」というコンセプトを掲げているように、デザイナーではなくても思い通りのデザインを作成できるような直感的なインターフェイスがSTUDIOの大きな特徴の1つです。 その使いやすさだけでも十分に魅力的なツールでしたが、なんと今回正式リリースに合わせて STUDIO上でWebサイトのデザイン... 続きを読む

Photoshop VIP ☞ 2012年の流行注意、Webデザイン的トレンド10個まとめ

2012/03/19 672 users Photoshop Vip おわり エントリー トレンド 機会

2011年のおわりに、2012年に利用される機会が増えそうなデザイントレンドをまとめました。 それからおよそ3ヶ月が経過し、実際にWebデザインで流行している「トレンド」を見ていきたいと思います。 海外デザインブログSmashing Magazineで、現在流行中のWebデザイントレンドを10個まとめたエントリー「Symptoms of An Epidemic: Web Design Trends... 続きを読む

ユーザーにクリックされやすいボタンデザインの5つのポイント | コリス

2010/02/17 381 users コリス ユーザー ボタンデザイン ポイント スタイル大全

ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに ... 続きを読む