Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
デザイン力を上げるトレースのいろは
こちらの記事はこの記事の転載です。 はじめに 以前（2年半前、当時学生）、Webデザインの勉強中にトレースの記事を書いたことがありました。 こんなサムネイルを見たことがある人が居るかもしれません..。（記事は昔のものなのでリンクは貼りません） なぜかこの記事が未だにじわ伸びし、noteで紹介されたりしており、「まずい..」と思ったため新たに記事を書くことにしました。 ちなみにサーチコンソール見ても「Webデザイン トレース」の検索が多く、勉強したいけどやり方がわからない人が多くいるんだなと再認識しました。 学生の時の私もまさにそれで、デザイン系の学部に通っていたため「じゃあデザインできるんだね！」的な印象を持たれがちでした。 でも大学ではWebやアプリのデザインの授業があるわけではないので、その辺は独学だったり、アルバイト先のデザイン事務所で教えてもらったりで勉強していました。 トレースは
情報ニーズから探るナビゲーション設計（一般的な４つの情報ニーズについて） - Tortoise Shell
Webサービスやアプリ開発に携わっている方であれば、日々追加されていくコンテンツに対してどのような情報設計を行うのか考える機会があると思います。 しかし、多くの現場では、そうした導線設計が場当たり的に行われていることが多いのではないでしょうか。 やみくもに追加され続けるコンテンツ、見直されることのないナビゲーション、大量のバナー置き場と化したトップページ…。 このような混沌とした状況を打開するためには、果たしてどうすれば良いのでしょうか？ 今回は、上記のような状況を打開するためのヒントとなる書籍である「情報アーキテクチャ」から、「一般的な４つの情報ニーズ」という概念についてご紹介したいと思います。 大規模Webサービスあるある 情報アーキテクチャのスケーラビリティ 一般的な４つの情報ニーズ 既知情報探索 探求探索 全数探索 再検索 コンテンツを再分類しよう まとめ 大規模Webサービスある
UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと
モバイルアプリ相互送客ツール「Tapdaq」のメインデザイナーであり、Dashboard UI Kitの作者として知られるJan Losertさん。4年間のダッシュボードデザインの経験からまとめた26のステップは、UI/UXデザイナー必読です。 過去4年間にわたってダッシュボードとアプリケーションのデザインを続ける中、プロダクトをさらに良く効率的なものにするために、いろいろな部署と付き合っていくこと、そしてそうした部署の人たちの知識を活用することを学びました。 この記事では、私が学び、日常のルーティンに取り込んだすべてのステップを紹介しようと思います。こうしたステップがあったからこそデザイナーとして大きく成長できたと思うので、読者のみなさんに役立つことを願っています。 事前準備をする Step 1. 集められるだけの情報を集める（例示は3パターンでお願いする） 私にとって、実際に稼働してい
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
110+ CSS Menu
Welcome to our updated collection of CSS menus for August 2023. This collection includes 37 new items, all hand-picked and free to use. These HTML and CSS menu code examples have been sourced from CodePen, GitHub, and other resources, ensuring a diverse and high-quality selection. Our August 2023 update brings a variety of innovative and aesthetically pleasing CSS menus. Whether you're looking for
シンプルなスケジュール表を実装する「Schedule Template」 – bl6.jp
スッキリしたデザインのシンプルなスケジュールテンプレートを実装するための「Schedule Template」をご紹介します。無駄な装飾もなく、とても見やすいスケジュール表を取り入れたい人にはピッタリですね。 以下からSchedule Templateのデモを確認できます。 デモ デモでは横軸が曜日、縦軸が時間によるスケジュール表が設置されています。各スケジュールが色別になっていてとても見やすいですね。 各スケジュールの時間の長さに合わせて縦のサイズも変化するので、どのくらい時間がかかるのかを瞬時に把握しやすいと思います。 マークアップやCSSによるスタイリングなどもシンプルなので、気になる方はぜひSchedule Templateをチェックしてみてはいかがでしょうか？ Schedule Templateの詳しい使い方やダウンロードに関しては以下のページからどうぞ。 Schedule Te
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
「自信がない」じぶんとのつき合い方 - デザイナーのイラストノート
夢見がちでまじめなうお座A型、社会人14年のうちフリーランスを10年もやりましたが、相変わらず人見知りですぐに自信をなくしてしまいます…。そんなわたしですが、最近ではこうやってブログやセミナーで自分の考えを発表する機会も増えてきました。「自信がない」じぶんとのつきあい方について書いてみたいと思います。 自信とは何か わたしにとって自信とは、「MP（マジックパワー）」のようなものです。その自信（MP）の根拠は、これまでの経験や他人から得た評価です。 じぶんを評価されるということ 人の評価というのは大きく2つあります、今回は「事実起因評価」と「感情起因評価」と呼ぶことにします。 学校や仕事で、評価を受けるときの物差しは、主に「事実起因評価」です。 しかし、人の能力というのはこれまで培ってきた感性というものと深く関わりがあります。例えばわたしはデザイナーですが、じぶんのデザイン能力や感性は「これ
商品写真でECサイトのユーザビリティを改善する10の方法
Webサイトでユーザーが買い物をするとき、そこには多くの要素がコンバージョンに導くために存在しています。それは、例えば信頼性やデザイン、表示スピード、ユーザービリティなどです。ひとつの要素に理由を絞ってしまうのは、短絡的です。 仮にサイトのデザイン、表示スピード、ユーザービリティそして信頼性といった要素が、顧客を商品ページまで連れてくるとすると、商品写真が最も大きなセールスポイントになります。 商品写真はコンバージョンに向けたパズルの最後のピースです。この記事ではあなたの商品の画像をどのように生かすかべきかのポイントをご紹介します。 １．画像をケチらない ECサイトにおいて、商品がどのような見た目なのかを見せるために、必要十分な量の画像を掲載することは重要です。ただし、商品のイメージカタログを作るのと同じ様に、余計な画像をアップロードしないように覚えておく必要があります。 また、画像は高品
待ち時間をもっと楽しく！コピペできるCSSローディングアニメーション38個まとめ
開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化によって自由でカスタマイズ性の高いローディングアニメーションがたくさん登場しています。 今回はコピペで利用できるCSSローディングアニメーションを、コミュニティサイト Codepen よりピックアップしご紹介します。 よりオリジナル性の高いデザインを作成することができ、待ち時間が楽しみになるようなエフェクトを中心に揃えています。どうしてもファイルサイズが大きくなってしまうページなどに活用してみてはいかがでしょう。 詳細は以下から。 待ち時間が楽しくなる、CSSコピペで実装できるローディングアニメーションまとめ #22 – Loader with Pure CSS 動きに合わせて、背景のグラデーションカラーが美しく変化するローディン
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
デザインをブラッシュアップする際のチートシート｜dwango creators' blog（ドワンゴクリエイターズブログ）
※今回のデザインの話は主にプロモ−ション系サイト、バナーに関する事例が多めです。 UIの話には当てはまらない場合がありますのでご注意下さい 腹筋です。 最近、「腕の筋肉もすごいんですが何の仕事をされているのですか」と質問されました。ご期待に添えず残念ですが、只の肩こりの酷いWebデザイナーです(^q^) さてさて、タイトルに「ブラッシュアップ」とありますが、イメージカンプを出して、概ねOKをもらった制作物をさらにブラッシュアップするって難しいですよね。 デザインで言うと、「適切な余白を設けているか」「ルール（フォントや余白など）が統一されているか」「アイコンの世界観を統一」等など。もちろん、OKラインを大きく超えないように細かなところを調節していきます。 しかし、そもそも何が足りないのか。 ほぼOKがでた。アタリの部分を作り込む。写真を差し替える。 で、デザインのブラッシュアップって？ あ
Free Bootstrap 5 Material Design Admin Product description The most complex and innovative Dashboard Made by Creative Tim. Check our latest Freebie Bootstrap 5 Dashboard with a fresh, new design inspired by Google's Material Design 2. Designed for those who like bold elements and beautiful websites, Material Dashboard 2 is ready to help you create stunning websites and web apps. We created many ex
フリーランスデザイナーの「つくること、はたらくこと」 - Speaker Deck
Transcript ϑϦʔϥϯεσβΠφʔͷ � ʮͭ͘ Δ͜ͱɺ ͨΒ ͘ ͜ͱʯ ࣗݾհ ͢Έ͔ͩ͋ ʢ֯ాҁՂʣ 8FCσβΠ ϯˍΠ ϥε τ Ϩʔλʔ େࡕࡏॅɺ ੍࡞ձࣾͰͷ8FCσβΠφʔΛܦͯ����ʹϑϦʔϥ ϯεʹɻ ओʹ-1αΠ τͷσβΠϯɺ ΠϥετΛ੍࡞͍ͯ͠·͢ɻ ͱ�ࡀͷஉͷࢠͱ ͏͕͗͞�ඖ͍·͢ɻ Ωϟ ϦΞ͚ͩ ��ʹ ɾ ɾ ɾ ࠓͷ͓͠ͳ͕͖ σβΠϯΛ࡞Δ ʮཧʯ ͱ ʮϏδϡΞϧʯ � ཧฤ � ϏδϡΞϧฤ � σβΠϯͷઆ໌ฤ ϑϦʔϥϯεͱͯ͠ಇ͘ Θͨ͠ͷ৺ಘ 01 02 ࠓͷͶΒ͍ ࠓͷςʔϚ ʮσβΠϯࡇʯ ɻ ʮσβΠϯղܾʯ ͜ͷ͜ͱΛͣͬͱ؊ʹ͡ ͖͚ͯͨΕͲɺ ࠷ۙͲ͏ͬ͘͠ Γ͜ͳ͍ɻ ࠓͷͶΒ͍ ݟ͚͕ͨͩσβΠϯ͡Όͳ͍ɺ ͰσβΠϯͷத Ͱɺ ͖Ε͍ͳ৭ɺ ͖ͯ͢ͳϑ
たった30分！？イケてるバナーを作るための8ステップ大公開
ferret編集部：2015年8月6日に公開された記事を再編集しています。 バナーくらい短時間でできる！と意気込んだものの、思った以上に時間をとられることはありませんか？ 簡単な作業だと思っていたはずが、何回も似たような作業の繰り返しをしているとイライラしてきたり、モチベーションも保てずと負のサイクルへ陥ってしまいます。 そのような問題を解決するためには、バナー作成のための各工程を分解して、何にどれくらい時間がかかっているのかを知り、効率よく作成する方法を知る必要があります。 今回は、30分でバナーを作るための方法として、作業工程と効率化が図れるポイントを順序立てて解説します。 広告バナー制作の全体像 短時間でバナーを作成する前提条件 制作全てに言えることですが、最短距離でゴールまで走るというのが一番の理想型です。バナー制作においても同様です。そのためにも、ゴールまでの筋道を立てる必要があ
ページを作ったあとの改善フローのセオリー | Webデザインセオリー Advent Calendar 2015
ページを作ったあとの改善フローのセオリー | Webデザインセオリー Advent Calendar 2015 2015/12/24 | カテゴリー: Creative | タグ: EC, まとめ, 考え方 タイトルとURLをコピーする Tweet yatさんに直接声をかけていただいたので Webデザインセオリー Advent Calendar 2015 というお題に対して記事をかいてみました。 Webデザインセオリー Advent Calendar 2015 とは デザイン、レイアウト、フォント、カラー、イラストなど、デザインに関するブログを書きましょう。 Webデザインを作る上で使う、ツールの使い方なんかでもOK！ 小ネタやTipsから、ガッツリとした記事、どんな形式でも構わないので、やってみませんか？ といった企画のアドベントカレンダーです。 最初に Webデザインセオリーと聞いてす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
ユーザーインターフェイス解剖学（公開版）
designmap.info
