{{ subscriptionAccess(item.product.subscription_months, item.product.subscription_lifetime) }}
![UI8 | Curated Marketplace for Designers](https://cdn-ak-scissors.b.st-hatena.com/image/square/19d42ce82fdf0f239bc258c02523f2d71f4b4c51/height=288;version=1;width=512/https%3A%2F%2Fimages.ui8.net%2Fassets%2Fog-image.jpg)
表示中のページから https://ferret-plus.com/655 にリダイレクトしようとしています。 このページにリダイレクトしないようにする場合は、前のページに戻ってください。
プライベートで CSS を教える機会があるのですが、CSS に関しては特に苦手にしている人が多く、「どうやったらそうなれますか?」という質問をよくもらいます。 そこで普段あまり考えたことがなかったので、ちょっと考えてみました。 その中で感じたことは、自分には見えているものが、他の人には見えていないということでした。 いくつかキーとなる視点がありそうなので、シリーズ化してみます。 今回は「レイアウト」について。 はじめに 今回は次のような、コメントフィード風の UI を作るケースを想定して順に説明していきます。 ちなみに自分の場合、作成時間は 15 分くらいでした。 コードはこちらで全て見ることができます。 https://codepen.io/mitsuruog/pen/dmZBLM?editors=1100 CSS が苦手な人にやらせた場合、自分が期待した通りにはならないケースが多いと思
UIデザインの作成ツール!誰でも分かるSketchの使い方【初心者向け】 初心者向けにSketchの使い方についての解説記事。アプリのUIデザインやWebデザインの作成ツールとして有名なSketchですが、初めて使う方でも分かるように細かく説明しています。デザイナーとしてスキルアップできるはずです。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査 アプリのUIデザインなどを作る上で有名なツール「Sketch」 デザイナーの方でSketchを
…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり!あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.本来、そこにあるはずの情報がない場合はどうなりますか? リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか? 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか? ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか? 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか? 通信エラー、リンク先のコン
シンプルなチャートから凝ったチャートまで様々なチャートを生成できるJavaScriptライブラリ「TOAST UI Chart」の紹介です。Bar、Column、Line、Area、Pie、Bubble、Scatter、Map、Heatmap、Treemap、Radial、Boxplotと多種多様なチャートが用意されており、チャートを組み合わせて表示させるなどカスタマイズも可能です。 Examplesでは様々なチャートが用意されていて、下部にあるコードの数値やカラーを変更し「Run it!」をクリックすると変更した結果がチャート表示されます。 あらかじめチャートにしたいデータがある場合は、こちらで表示確認しながらデータを入力し、完成したコードをコピペってこともできそうです。
ツールの使い方 色を赤・緑・青の3つで表現する「RGB」と、同じく色を色相・彩度・明度の3つで表現する「HSV」と「HSB」を相互変換するツールです。HTMLなどで使う16進数カラーコードとの変換も可能。 Webブラウザ上で動作するので手軽に利用できます。 RGB値をHSV値に変換したい場合は、RGB値の欄に変換する値を入力してください。 HSV値をRGB値に変換したい場合は、HSV値の欄に変換する値を入力してください。 HSB値を変換する場合はHSVの欄にH値・S値はそのまま、B値はV値の部分に入力してください。 値を入力すると、変換後の値が自動的にセットされます。 RGBの各パラメータは0~255の値で表示されます。 HSVはデフォルト設定だとHが0~360、SとVは0~100で表示されますが、Hを0~100、SとVを0~255の範囲に変更することもできます。 HSVとHSBの違い 「
使い方 カラーコード、RGB値、HSV値のいずれかを入力します 左側の入力値を優先して変換します (カラーコード > RGB > HSV) 変換する ボタンをクリック
アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。 優れたUIデザインは、シンプルさ(英: Simplicity)と有効性(英: Effectiveness)が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。 デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。 公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基本的な操作を行
待望の画面遷移図機能をベータリリースしました!😂🎉✨画面にリンクを設定するだけで、画面遷移図が自動作成されます みなさまから多くのご要望をいただいていた、画面遷移図機能をついにリリースしました! Prottの画面遷移図機能を使うと、プロトタイプの遷移やデザインがそのまま反映された画面遷移図を簡単に生成できます。そしてプロトタイプを変更すると、画面遷移図も自動的にアップデートされます。 今日からはプロトタイプと画面遷移図を別々のツールで作成する必要はありません! 機能:遷移線の編集 画面遷移図は自動で生成されるだけでなく、遷移線の表示・非表示を変更することも可能です。これによって、必要な遷移だけを見せることができます! 編集した内容は自動的に保存されます。 機能:PNGとPDFで書き出し 作成した画面遷移図はPDFとPNGで書き出すことができます。 チームメンバーに共有したり、打ち合わせ
最近ユーザー体験 (UX) はアプリやWebサービス、そしてオフラインの店舗など最新のケースをイメージする事が多い。しかし、より良いUXが最も売り上げとしての結果に直結するのが、Eコマースサイトでのオンラインショッピングに対する体験設計 (UXデザイン) になる。 誰にでも分かるUXデザインの基本 同じ商品を販売する場合でも、よりスムーズで購入意欲を高める導線をデザインする事が出来れば購入率が上がる。各種Eコマースサービスが普及し、実店舗の存在がどんどん危ぶまれて来ているこちらアメリカでは、いかにしてオンラインでの購入量をアップさせるかが企業にとっての大きな課題となっている。 近い将来テクノロジーが葬る10の産業 アメリカ大手ショッピングサイトをベースにリサーチ今回は全体の販売量が多く、UXデザインにもかなりのリソースを投入している Macy’s, Amazon.com, Kohl’s,
デバイスがパソコンからモバイルへ、そしてウェブからアプリの時代へ移り変わっていくとしてもユーザビリティとは常に変わらず求められるものである。そしてユーザービリティはそのサービスが提供する価値に大きな影響を持っている。 例えば、ECサイトを考えてみるとユーザビリティが直接購買意欲につながるわけではないが、商品購入までの過程をスムーズにおこなうことができたら、ロイヤリティーの高い顧客を増やすことが出来る。ユーザビリティはその全てのフローに関わるものである。 それではユーザービリティが高いサービスとはどのようなものだろうか?学術的な分野でユーザビリティの権威とも言われるJakob Nielsen博士はユーザビリティの高いインターフェイスは以下の5つのポイントを兼ね備えていると述べている。 学習しやすさ : システムは、ユーザがそれをすぐ使い始められるよう、簡単に学習できるようにしなければならない
フォームの成績が 15分で 平均22%アップします。 f-tra EFOを活用すれば、先進企業のEFO(フォーム最適化)の ベスト・プラクティスを今すぐ開始できます。 今すぐ始める
Prottは、2024年8月31日をもちましてサービスを終了いたしました。 これまでのご愛顧に深く御礼を申しあげます。 サービス終了に関する詳細はこちらのページをご参照ください。 Prott サービス終了に関する今後についてのご案内とお問合せ先 改めまして、これまでProttをご利用いただき誠にありがとうございました。 We regret to inform you that our service, Prott, has been discontinued as of August 31, 2024. We deeply appreciate your loyalty and support over the years. For more information on the service termination, please refer to the following page
「PCやサイトのスマホ版を作ったけど、思うように成果が上がらない・・・」「どうすれば成果の上がるスマートフォンサイトを作れるのだろうか・・・」とお悩みのweb担当者の皆様へ。 その答えは、「UI/UXの改善」にあります。 多くの企業がスマホサイトで成功していない原因としてありがちなのが「PCサイトを安易にスマホサイト風に変換しているだけ」というパターンです。 そのため、スマホとPCの違いを考慮して、スマートフォンでのユーザー行動を意識したUI/UXに改善するだけでも、CVRは簡単かつ速攻でアップするんです! そこで、今回はCVRを向上させるためのスマホサイトのUI/UXを改善するためのチェックポイントをご紹介いたします。ぜひ皆様のWebサイトの改善にお役立てください! サイトUIを改善するための分析手法を知りたい方は、こちらの資料を手元に置いてみてみてください。 ※本記事は2014年7月8
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く