最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利です。
デザインの参考になる！ 最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利です。
lookup.design - ui examples
what we offer Only Good DesignsFinding design inspiration is needlessly painful. Instead of going through hundreds of bad or unrealistic examples, we help you find what you need right away. Every design in our library is handpicked from the best-designed websites around. Save time Seamless searchEvery single image in our library was painstakingly named, categorized and indexed by hand. Your time i
FlexboxやCSS Gridでよく用いられるレイアウトのコードを提供する・「1-Line Layouts*」
1-Line Layouts*はFlexboxやCSS Gridでよく用いられるレイアウトのコードを提供するプロジェクトサイトです。 センター配置やサイドバーを持った2カラムレイアウト、ヘッダ/メインコンテンツ/フッターを1カラムで揃えたパンケーキスタイル、なつかしのHoly Grailレイアウトやカードを並べたUIなどよく見かけるレイアウトが揃えられています。 例えばこのようなカードを並べたようなレイアウトはかなり使われている印象ですね。 CSSをよく学んでおられる方には不要だと思いますが、そうでない方には結構有益なプロジェクトサイトではないかなぁと思います。 1-Line Layouts*
これで分かった！CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ
この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作成できるツールもあります。覚えようと思ってなかなか手がつかなかったひとも、これならすぐにはじめることができますよ。 CSS Gridの使い方ガイド、チートシート、ゲームまとめ Grid Garden CSS Gridレイアウトプロパティを使うことで、人参に水を与えながら自分の農園を育てていく、ゲーム感覚でGridプロパティを学ぶことができます。ゲームの各レベルでは、ゲーム達成に利用できる他のプロパティについてもサンプル例と一緒に解説されています。 Bonus – CSS Dine
Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」
FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければならない事も多く、正直言って面倒です。使うたびに検索してる、なんて方もいるかもしれませんね。 こちらはそんなFlexboxを、完成形を確認しながら選択肢を選ぶだけでコードを完成出来る、というもの。動作するチートシート、みたいな感じでした。 使ってみる 使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には
CSS Grid Generator - CSSグリッドを簡単に作成
CSS3ではグリッドが簡単に作れる機能が実装されていますが、テキストできちんとした設計を行うのは大変です。左右の関係を考えながら組むのですが、入れ子になっていたりするとすぐに破綻してしまいます。最初の設計をきちんと行わなければなりません。 そこで使ってみたいのがCSS Grid Generatorです。Webブラウザ上でビジュアル的にCSSグリッドの設計ができます。 CSS Grid Generatorの使い方 メイン画面です。 マウスでドラッグしてグリッドを設計します。 そしてCSSの設定をダウンロードします。 生成されるテンプレートを見れば、その内容は分かると思います。しかし、これを頭で計算して記述するのは面倒です。複雑なグリッドになれば尚更でしょう。CSS Grid Generatorを使うことで素早く設計を行い、そのコードがゲットできるでしょう。 CSS Grid Generato
レスポンシブレイアウトを手軽に検証できる無料デザインツール8選まとめ
最近のウェブデザインでは、あらゆる画面サイズに対応するレスポンシブレイアウトが必須となっています。デスクトップでは問題ないように見えても、モバイル端末から閲覧するとユーザビリティの問題点が見つかることもしばしば。 今回は、無料なのはもちろん操作に迷わず手軽にレスポンシブデザインを検証できるオンラインツールをまとめてご紹介します。多くのツールで、画面サイズごとにまとめてレイアウトを確認できるなど、ウェブ制作が捗るものばかりです。 詳細は以下から。 レスポンシブレイアウトを手軽に検証できる無料デザインツールまとめ XRespond お好みの画面サイズを設定し、ウェブサイトのURLを入力するだけで、まとめてレイアウトを確認できるオンラインツール。ドロップダウンから特定の端末サイズを指定することもでき、幅広いセレクションが揃います。 Responsinator 上記ツールに似たものとして、Resp
手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」
2017年4月15日 CSS, 便利ツール 先日公開した記事「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「Griddy」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ ↑私が10年以上利用している会計ソフト！ Griddyのサイトを開くと4つのグリッドアイテムが表示されています。アイテムの数を増減するには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンをクリックして数を変更します。 続いて「Grid Template Columns」でカラムの幅を指定します。デフォルトでは3つのボックスが横並びになっていますが、4つ以上
CSS Grid Layoutに触れてみよう！ CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーター
Webページをレイアウトする際にfloatを使って、そして去年あたりからはflexboxを使っての実装が増えてきたと思います。 CSS Grid Layoutはようやくすべてのデスクトップブラウザでサポートされたばかりですが、レイアウトすることに特化されており、シンプルな記述でより柔軟なレイアウトを実装することが可能です。 CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーターを紹介します。 CSS Grid Layoutってどんな感じ？ という人にもいいかもしれません。 CSS Grid Template Builder CSS Grid Layoutでレイアウトをするには、「grid-area」プロパティを使って、グリッドの定義をすることから始めます。例えば、通常のページの場合、ヘッダ・フッタ・コンテンツ・サイドバー2つのエリアを定義します。
UXデザイナーが備えておきたいツール・サービス厳選20個まとめ
UXデザインとはユーザーエクスペリエンス(UX)、Webサイトやアプリの使い勝手やユーザーが体験する満足度を重視したデザインのことで、あなたが満足するデザインをつくってもユーザーが使いやすいと感じなければUXが良いとは言えません。 ユーザーのリサーチやテストやフィードバック、プロトタイプやワイヤーフレームの作成、クライアントやチームメンバーとのコラボレーションなどに役立つツール・サービスを紹介します。 20 Valuable Tools For UX Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーのリサーチ・テスト・フィードバック プロトタイプ・ワイヤーフレームの作成ツール コラボレーションのツール ユーザーのリサーチ・テスト・フィードバック ユーザーのリサーチは、プロトタイプを制作する前におこなう
Webページのグリッドを計算する時に便利！全体幅・カラム数・溝の組み合わせのパターンを提示してくれる -Grid.Guide
Webページのグリッドを決める時、全体の幅、カラムの数、溝のサイズ、両端のスペースを元に、グリッドのパターンを提示してくれるオンラインサービスを紹介します。 1px端数がでてしまうといった面倒な計算とは、これでさようならです。
無料で使えるモバイルアプリ制作用のプロトタイピングツール
2016年2月18日 スマートフォン, 便利ツール 以前「Webサイトのプロトタイプ制作に使える無料オンラインツール」というのを記事にしましたが、今回はモバイルアプリ制作に特化したツールを調査してみました。ただ、知らない間に便利ツールが増えまくり、あまりにも数が多いので無料で使えるものに絞り、さらに使ってみていいなと思ったものを集めました。それでも数が多いので…あとは実際にみなさんで試してみて、自分にあったものを探してみてください！ ↑私が10年以上利用している会計ソフト！ おすすめ無料プロトタイピングツール Marvel Marvel 無料プランでもプロジェクトを無制限に作成できちゃうプロトタイピングツール。ブラウザー上で編集していきます。リンク先となるページ画像がサムネイルで表示されていて、ページ推移時のアニメーションも分かりやすいです。コメント機能もあり。 完成したプロトタイプはUR
Flexboxでどういうレイアウトができ、各プロパティはどのように挙動するのかがよく分かる -Flexbox playground
2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。IE11を対象した際に、Flexboxの導入を考える制作者も多いと思います。 ※Vistaは2017年にサポート終了（参考: Windows製品のライフサイクル） Flexboxでどういうレイアウトができるのか、各プロパティはどのように挙動するのかが分かるFlexbox playgroundを紹介します。 Flexbox playground Flexbox playgroundはページの埋め込みにも対応しており、Flexboxのコンテナとアイテムの各プロパティがどのような挙動をするかよく分かると思います。 Flexboxの各プロパティの詳しい解説は、下記ページをご
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました
CSS GridとFlexboxの便利なツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Layout Generator
CSS Layout Generator
コリス
Flexboxを使ったページのレイアウトから要素の配置まで、レスポンシブ対応のコードが生成できるツール -Flexible Boxes
Flexbox Patterns
display: flex