UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ
WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、モバイルファースト用のメディアクエリ、スマホ・タブレットの主要デバイス用のメディアクエリのチートシートをまとめました。 /*------------------------------------------ Responsive Grid Media Queries - 1280, 1024, 768, 480 1280-1024 - デスクトップ（デフォルトのグリッド） 1024-768 - タブレット横長 768-480 - タブレット縦長 480-less - スマホ --------------------------------------------*/ @media all and (min-width: 1024px) and (max-width: 1280px) { } @media all
ブーム到来か。ノングリッドデザインの魅力と参考になるWebサイト | Web Design Trends
既存の枠に囚われず、自由に画像やテキストをレイアウトする「ノングリッドデザイン」のWebサイトがここ最近で多く見られるようになってきました。 近年オリジナリティがWebデザインに強く求められるようになってきていて、従来のルールに従わず、個性を強調したようなWebサイトが増えてきていますが、ノングリッドデザインはまさにその特徴的な例の1つです。 今回はノングリッドデザインについて詳しくご紹介していきたいと思います。 2019年に流行するWebデザインの最新トレンド18個まとめ そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか... Web Design Trends ノングリッドデザインとは 一般的なWebサイトでは、縦方向や横方向に区切って
CSSの作業をもっと楽に！無料で使える便利なWebツール40選
CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ
話題のデザインシステムって何？積極的に取り入れたいデザイン要素14個まとめ
ここ数年、デザインシステム（英: Design System）がデザイナーの間で話題となっています。この記事では、デザインシステムが重要な理由と、何を含む必要があるのか、人気ブランドから公開されているデザインシステムのサンプル例と一緒に、まとめてご紹介します。 多くの企業やビジネスにおいて、デザイン設計により投資するようになってきています。デザインシステムをきちんと作成することは、成長を続けていて、すべてを把握する必要がある企業やチームにとってとても有益で、良いユーザー体験には不可欠と言えます。デザインシステムは、デザインのミスを削減したり、デザインプロセスを高速化、またさまざまなチーム間でのやりとりにも役立ちます。 01. グリッド グリッド（英: Grid）は、ページレイアウトを理解し、統一するために必須のコンポーネントです。たとえば、MailChimpのデザインシステムの最初に記述さ
デザイナーが押さえておきたい、2018年のウェブデザイントレンド6個まとめ【完全ガイド】
2018年になってここまで、ウェブデザインにとって驚くべき年を迎えています。これまで何年もかけて進化してきたデザインが、デザインシステムやタクタイルデザインのような新しいトレンド、また楽しく元気なレトロスタイルの復活などにつながっています。これまで以上に、ウェブデザインの現状と今後の流れを考えることが重要になってきます。 この記事では、2018年にもっとも影響を及ぼしている、6つの最新ウェブデザインのトレンドをまとめてご紹介します。 01. コンポーネントを元にした「デザインシステム」 まだデザインシステム（英: Design System）を導入していないなら、きっと今後数年以内に利用することになるでしょう。最新版となる 2017-18 Enterprise UX Industry Report によると、デザインシステムを利用していない企業の67%が、現在作成中と答えています。 デザイ
人気急上昇！2018年にグラデーションカラーが愛用される10個の理由
ここ何年も続いた�フラットスタイルやマテリアルデザイン、そしてスッキリとした見た目のミニマルスタイルを経て、グラデーションカラーが復活の兆しを見せています。 多くのデザイナーが、グラデーションカラーをさまざまな制作に利用しています。今回は、2018年のデザイン制作にグラデーションを愛用したい10個の理由、ポイントをまとめてご紹介します。 詳細は以下から。 01. 興味を引く背景を作成します。 グラデーションは、視覚的にユニークな見た目を実現し、ユーザーの視線を誘導するのに役立ちます。まず視線はひとつの色に注目し、グラデーション色合いや明るさが変わることで、画面全体に焦点を移動させるのに最適です。 グラデーションは、業種を問わず幅広いデザインプロジェクトに利用できとても便利。グラデーションの具体的な使い方はたくさんありますが、もっとも一般的なオプションのひとつに、画像や文字テキスト、その他の
【2018年版】Webデザインの最新トレンド5選
Windows8が登場した2012年以降、Webデザインに関する話題においてフラットデザインという用語をよく耳にするようになった。 AppleもiOS7を発表した2013年からは、従来使われていたスキューモーフィズム、つまり物理的なアイテムに似せたデザインをやめ、フラットデザインを採用している。 iOS6, 7 これらにより多くのWebサイトに影響を与えたフラットデザインは、現在多くのWebサイトで見かけるようになったが、Webデザイン界ではこれに限らず毎年クリエイティブなデザインが生まれ続けている。 この記事では、2017年後半に見られたクリエイティブなWebデザインのうち、2018年も引き続きトレンドとして見られるであろうものを紹介する。 【トレンド①】モバイルファースト アクセス解析ソフトを提供しているStarCounterによる世界のブラウザ定点観測の調査によると、2016年11月
リアルタイムに多彩なグラデーションCSSを生成できる「CSS Gradient Generator」
たまたまかもしれませんが、最近この手のツールも次々に良いものが出てくるなと感じています。つい先日も直感的なCSS3のグラデーションジェネレーター「GradPad」をご紹介させていただきましたが、今回のツールはさらに細やかなグラデーションの設定を、手軽におこなえるようになっています。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 多彩なグラデーションCSSを手軽に生成できる「CSS Gradient Generator」 「CSS Gradient Generator」は、わかりやすいUIで多彩なグラデーションCSSのパターンを生成できるオンラインツール。 実際にサイトで使った場合の具体的なサンプルも見ることができたり、グラデーションのサンプル集からCSSを取得できたりするのもこのツールの良いポイ
Webサイトを使いやすく！UIデザインのCSS小技テクニック21個まとめ（実例サンプルコード付）
素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。 文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。 背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな
Art directed responsive images with picture and Cloudinary
Previously, we saw how to mark up performant, adaptable <img>s using srcset and sizes in conjunction with Cloudinary’s image transformations. How far can we push that notion of “adaptability”? Last time, we learned how to offer up an image at a range of different resolutions. This allowed us to send large resources to large screens and small resources to small ones. We used srcset and sizes to ada
[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js
スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ
![[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/02491c4eeaaee338bf6a3bba36d56f47a7ba450b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011204.png)
Mobile Navigation For Smashing Magazine: A Case Study — Smashing Magazine
Back in spring 2013, Smashing Magazine sported a <select> menu as its mobile navigation. It wasn’t considered an anti-pattern back then and Marco Hengstenberg still thinks it’s a viable solution to the complex problem of how to build accessible and functional cross-device navigation. Brad Frost wrote a few words about the pros and cons of this pattern on his blog and Marco couldn’t agree more. In
webフォントファン｜日本語webフォントwordpressプラグイン
日本語ウェブフォントでワードプレス 簡単に使えるウェブフォントプラグインの特徴 愛されるウェブページに劇的チェンジ この上のフォントはフロップデザインWEBフォントを使用 ウェブサイトのデザインは実は文字が主役です。ページのほとんどを文字が占めています。 日本語webフォントを変えるだけでサイトイメージはガラリと大きく変わります。 カンタンにワードプレスにインストール この上のフォントはうつくし明朝フォントを使用 通常のワードプレスのプラグインのようにインストールするだけの簡単設定。 上級者はCSSページで詳細にカスタマイズ設定を行うことも可能です。 ブログやウェブ制作の効率、SEOのアップ この上のフォントはスマートフォントWEBを使用 日本語webフォントなので変更の際は文字を書き換えるだけで大丈夫。 またテキストなので検索エンジンに対するSEOの向上も期待できます。 超軽い日本語ウェ
38 Bright Color Web Design Inspirations - DzineBlog.com
Today I would like to share 38 amazing web designs using very bright colors as the design elements. Some designers try to avoid the use of bright colors as they are quite harmful for some reasons. I think when you can integrate at the correct way, you will see a beautifully refreshing result. This post is to inspire you (and me) with the fresh inspiring designs submitted by designers worldwide. If
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ・ウェブデザインにも対応したフレームワークいろいろ | DesignWalker
CSSグラデーションで作った背景パターンのサンプル - NxWorld
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
そのフォントが世界のトップサイトでどれぐらい使われているか『Font Reach』 | 100SHIKI