最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger | コリス

2017/09/14 754 users たくさん プロジェクト 素晴らしいデザイン コリス テクニック

ぱっと見ただけではなかなか気がつかないような、ディテールにこだわった素晴らしいデザインのアイデアとテクニックを使ったUI要素を紹介します。 最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立 ...記事の続きを読む 続きを読む

ソシオメディア | フラットデザインはUIを進化させるか

2013/05/02 572 users ウェブ デザイナー ポテンシャル UIトレンド トレンド

ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り... 続きを読む

ソシオメディア | フラットデザインはUIを進化させるか

2013/05/02 571 users ウェブ デザイナー ポテンシャル UIトレンド トレンド

ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り... 続きを読む

Webデザインでよく使うUI要素の名称・用語一覧 - Qiita

2016/11/25 494 users Qiita モーダルウインドウ modal ダイアログ 名称

Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、自分の場合こんな感じです。 コミュニケーション円滑にな〜れ ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォ機能で出るやつ。ダイアログとも。 ▼ モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「ページ... 続きを読む

最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス

2019/05/08 448 users アイデア The テクニック コリス 素晴らしいデザイン

デザインは奥が深いですね。 Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをCSSで実装するテクニックを紹介します。 The “ ...記事の続きを読む 続きを読む

HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

2019/11/21 434 users コリス 古いブラウザ CSS サポート 新しい機能

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You ca... 続きを読む

デザインのアイデアが豊富！最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ | コリス

2017/03/13 221 users スクロール 空白スペース マテリアルデザイン 前提 テクニック

最近のWebデザインは、フラットデザインやマテリアルデザインが少しずつ進化し、コンテンツにフォーカスされたシンプルなデザインが定着してきました。写真は大きく、テキストは読みやすく、空白スペースは大胆に配置されています。 レイアウトは縦長型や分割型、カード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインをよく見かけます。 最近のWebデザインで使われているさまざまなテクニック... 続きを読む

新しくなったMaterial Designのココに注目！最近のUI要素・コンポーネントのデザインや使い方がしっかり学べる | コリス

2018/05/11 168 users 皮切り コリス コンポーネント オープンソース 毎月

先日開催されたGoogle I/O 2018で、Material Designは大きくアップデートされました。 ロードマップ によると、今回のアップデートを皮切りに、これからも毎月リリースされ、Material Designはその表現力を高める機能を充実していくとのことです。 Material Design Material DesignはGoogleが提供するオープンソースのデザインシステムで、... 続きを読む

UIデザインにおけるボタン:スタイルの進化とベストプラクティス | デザイン | POSTD

2017/04/05 156 users POSTD インタラクションデザイン ベストプラクティス

ボタンはごく普通の、インタラクションデザインの日常的な要素です。ボタンはとてもシンプルなUI要素に見えますが、過去数十年間でそのデザインはかなり変わってきました。 この記事ではボタンデザインの発展を辿りながら、有効なボタンを作るために何が最も重要で最適なのかを見つけて行きたいと思います。ボタンはごく普通の、インタラクションデザインの日常的な要素です。ボタンはとてもシンプルなUI要素に見えますが、過... 続きを読む

div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui | コリス

2019/09/18 149 users コリス 矩形 ユーザーインターフェイス class div要素

Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされ... 続きを読む

AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE

2023/04/04 144 users ナビゲーション コンポーネント CSS AIツール 生成

AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション　アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI ... 続きを読む

CSS Subclassing

2019/05/06 116 users CSS アプリケーション 実装 上野 コンポーネント化

上野 学（@manabuueno）- 2014年1月17日 CSS Subclassing は、主にアプリケーションよりのウェブの実装に役立つ CSS の書き方である。 アプリケーションよりのウェブとは、企業広報サイトのように各画面でデザインの個別性が高いものではなく、コンポーネント化されたUI要素の組み合わせのみで各画面が構成されるような... 続きを読む

商用利用無料、スマフォ向けユーザインターフェイスの引き出しを増やすPSD素材 -Flatastic Mobile UI Kit | コリス

2013/12/05 115 users コリス psd 区分け PSD素材 エレメント

ソリッドなライン、半透明のパネル、サークル状のエレメント、囲み線を使わない情報の区分けなど、美しくデザインされたスマフォ用のUI要素が100以上揃っており、しかも使用しているフォントやアイコンもセットになっているPSD素材を紹介します。 Flatastic Mobile UI Kit ダウンロードできる素材のフォーマットはPSDが2種類。 .psd (Retina Display) .psd (S... 続きを読む

Atomic Designってデザイナーには難しくない！？という話

2018/07/30 108 users Atomic Design DeNA デザイナー 最小単位

Atomic Designってむずくないすか？ なんか、良さそうなのは分かるんですよ。 UI要素を最小単位まで分解して、それを共通化して再利用性を高めて工数減らしていこうぜ！ということなのは分かるんです。 Atomic Design を分かったつもりになる こちらはDeNAの記事で、単純に「Atomic Design」でググると最初に出てくる記... 続きを読む

こういうのを一つは用意しておきたい！Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材 | コリス

2017/09/27 103 users Sketch コリス ダウ フォント フォーマット

スタイルガイドを0から作成している人に、朗報です。 Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。 UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。 Symbols Symbolsで作成できるスタイルガイド Symbolsのダウ... 続きを読む

商用利用無料、UIデザインに役立つSketch用の素材のまとめ | コリス

2015/09/16 78 users Bootstrap コリス グリッド コンポーネント 素材

最近のWebデザインで利用されている基本的なグリッド、さまざまなページレイアウト、BootstrapやMaterial Designなど人気の高いフレームワークのUI要素やコンポーネントなど、UIデザインに役立つSket...記事の続きを読む 続きを読む

プロペラがすごい！よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller | コリス

2017/02/28 74 users エレメント フレームワーク コンポーネント コリス プロペラ

最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。 Propeller Propeller -GitHub Propellerの特徴 Propellerのスタイル・コンポーネント Propellerの特徴... 続きを読む

iOS 12に使用されている全てのUI要素・スクリーンが収録されたAdobe XD, Sketch, Figma用の無料デザイン素材 | コリス

2018/11/28 70 users コリス Sketch 商用 クライアント Figma用

iOS 12のパブリックリリース版で使用されている全てのUI要素・スクリーンが収録された、Adobe XD, Sketch, Figma用の無料デザイン素材を紹介します。 iOS 12 GUI ダウンロードできる素材は、3種類です。 Adobe XD用 Sketch用 Figma用 利用にあたっては個人でも商用でも、クライアントのプロジェクトでもOKです。 詳しく... 続きを読む

フラットデザインへの長期接触： このトレンドが、どうユーザーの効率を徐々に下げているか – U-Site

2015/12/22 60 users U-Site コンテキスト Long 手がかり 原文

クリックできるUI要素のシグニファイアがなかったり弱かったりすると、ユーザーは次第にページ中をあやふやなままクリックしたり、マウスオーバーするようになる。そうすると、効率が落ちる一方、コンテキストからの手がかりやクリックへの即時フィードバックがより期待されるようになる。 公開：2015年12月21日付（日本語版）、2015年11月8日付（原文）　著者：Kate Meyer 原文（英語）： Long... 続きを読む

WebサイトやスマホアプリのUIデザインに必要な要素・あると便利な要素がまとめられたリスト -Checklist Design | コリス

2019/04/02 52 users UIコンポーネント クライアント コリス デザイナー 成果物

Webサイトやスマホアプリのデザイナー・制作者、そしてクライアントにも役立つUI要素のデザインのチェック項目を紹介します。 ページに必要な要素、UIコンポーネントに必要な要素、あると便利な要素がまとめられています。デザインを始める時、そして最終的な成果物をチェックする時に、デザインに必要な要素が欠けてい... 続きを読む

Web制作者が揃えておきたい、macOSのデスクトップ用のGUIが揃った無料のデザイン素材 | コリス

2017/08/21 34 users インターフェイス コリス カーソル Safari MacOS

ユーザーフローを構築する場合でも、Macのインターフェイスを構築する場合でも、現在利用できるデスクトップのGUI素材はほとんど見かけません。 macOSのインターフェイス、Safari, Chromeなどのブラウザに含まれるUI要素をはじめ、メニューバーやドロップダウン、カーソルまで、デスクトップ用のGUIが揃った無料のデザイン素材を紹介します。 Desktop Kit -Facebook Des... 続きを読む

UI要素の作りこみに参考になりそうな高品質なフリーのPSD素材まとめ15個 - W3Q

2012/03/27 33 users PSD素材 高品質 W3Q 参考 アイコン・素材

[アイコン・素材] UI要素の作りこみに参考になりそうな高品質なフリーのPSD素材 続きを読む

知っておくと役立つ！CSSの疑似要素:beforeと:afterを使用したUI要素を実装するテクニックのまとめ | コリス

2019/12/03 28 users before コリス After 領域 CSS

CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Case... 続きを読む

ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ | コリス

2019/10/15 27 users ライセンス サイドバー コリス 翻訳記事 下記

ボタンやアイコン、ナビゲーション、サイドバーなど、さまざまなUI要素に適したクリック・タップ可能な領域のサイズを拡張する実装方法を紹介します。 Enhancing The Clickable Area Size by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています... 続きを読む

Mac - Gyazo.appなどにLSUIElementにtrueを指定するとべんり - Qiita [キータ]

2013/11/07 25 users フォアグラウンド キータ Qiita Dock true

Gyazo.appはDockにアイコンが表示されてフォーカスも奪うけど不便なことしかない。 LSUIElementという設定値を真値にすると、独立したUI要素を持たず、Dockやアプリケーション・スイッチャにアイコンが表示されない、いわゆるバックグラウンド・アプリケーションになる。 Gyazo.appやHardwareGrowler.appなどはフォアグラウンドで起動しても嬉しくないので、この設定... 続きを読む