こんにちは。 スマートフォンサイトやアプリにおいて、重要なことの一つであるUI(ユーザーインターフェース)。 また、PC向けサイトでも、よりユーザー目線に立ったUI設計が必要です。 UI設計ひとつで、大きくコンバージョンが上がったり、クリック率の増加が見込めるので、入念に考えなければなりません。 今回は、UIを徹底的に考えるために、UIについて様々な視点から書かれたスライドをご紹介したいと思います。
![UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/facf0cd023a3761946699420ea646d560701378a/height=288;version=1;width=512/https%3A%2F%2Fcreive.me%2Fwp-content%2Fuploads%2F2013%2F07%2Fui_design.jpg)
Chart.jsというのが流行っているみたいなので、もうちょっとフラット感がでないものか、カスタマイズに挑戦してみました。Chart.jsの使い方などは、LIGさんの記事を参考にしてください。 ドーナッツ これを何個か並べればかなりフラット感が出ますね。外側の青い部分のみをChart.jsで描画し、それ以外はCSSで調整しています。2つ目のセグメントを背景色で塗れば、円弧のように見えます。 ※ ドーナッツの幅は、percentageInnerCutout で調整できます。 ラインチャート お次は棒グラフです。フラットに見せるポイントは、グラフや線などを簡略化することでイラストのように見せるところです。また、数字と組みあわせるとかっこ良く見えます。※ 数字の部分は、CSSで組んでいます。 ※ 横軸のラベルは、意図的に減らしています。 バーチャート 棒グラフもフラットにしてみました。こちらも数
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 (参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう(前編), (後編)) プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
You must enable JavaScript to use Dunked If you're seeing this message, then either your browser does not support JavaScript, or JavaScript has been disabled. Please enable JavaScript in your browser settings to continue.
昨今のWebデザイン界隈ですと、それは当然Webフォントを使おうということにもなろうと思いますが、注意すべき事柄に気付きましたのでここに御シェアさせていただきたく存じます。 問題 フォントの中にはたくさんのグリフ(字形)が入っていて、「あ」だったらこのグリフ、「い」だったらこのグリフ、というように対応しています。たくさんの文字を作るのは大変だから、たとえばひらがなとカタカナだけとか、第一水準漢字までとか、少ないグリフだけのフォントもあります。 Webフォントを設定していて、存在しないグリフの文字があったとすると、ブラウザが良い感じにフォールバックして別なフォントで表示してくれたりします。またCSSのunicode-rangeというのを使うと、あるフォントから使うグリフをUnicodeのコードポイントの範囲で設定することができます。範囲外のグリフはやはりフォールバックされます。((unico
自称エンジニアですが、先日必要に迫られてWebデザインをしました。 その際に参考になったサイトを紹介します。 デザイナーさんにとっては既に有名すぎるサイトばかりだと思います。 自己満足以外の目的でデザインするのは初めてでしたが、 デザインて、想像以上に難しいですね。 私はデザインする際まず、こんな感じにしよう!と思えるページを探してから、 そのページで使う色を決める、という順番で考えるようにしています。 良いデザインのサイトをまとめたサイト Sites we like 海外のかっこいいサイト集 One Page Love 1Pの縦長サイトをまとめたサイト集 I/O 3000 スッキリとシンプルな感じのデザインが多い気がするサイト集 カラーコディネートで使えるサイト kular Webデザイナーさんも多分よく使ってるサイト。 5色のカラーコディネートが本当にたくさんあります。 ただ個人的には
It’s not unusual to have a flashback to the Netscape Navigator 4 and Internet Explorer 5 days when working on an HTML email. The quality of rendering engines is totally inconsistent, most modern development techniques are unavailable, and even images – an essential element of many emails – are turned off by default in many clients. This can feel like 1998, but the web development community has lea
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト Jan 28th, 2013 Tweet Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました! (03/05 追記) FlatUI、Bootstrap Expoを追加しました (03/24 追記) Flatstrapを追加しました (04/03 追記) MagicSuggestを追加しました (04/04 追記) Bootstrapのリソースネタを別の記事にしました 無料のテンプレート 無料のBootstrapテンプレートの紹介です。BootswachのようにCSSだけで適用できるものと、HTML/CSS/JSなどいろいろ追加しないと実現できないものがあります
ユダヤ式記憶術 口コミについて調べているなら、こちらのサイトをよく見たほうがいいです。 そして「試験に受かるユダヤ式記憶術」を購入したいと考えているなら、上記のサイトで、「試験に受かるユダヤ式記憶術」を使うことで何ができるのか、きちんと理解してからお求めになることをオススメします。 また、口コミや評価が書いてあれば、それもしっかりと見ましょう。 以下の「試験に受かるユダヤ式記憶術」についての情報も役立つかもしれません。 商品名称:「試験に受かるユダヤ式記憶術」 商品紹介:新タイプの記憶術。 従来のイメージ式記憶術を覆す。東大(文Ⅰ)から東大大学院卒業、外国語を40ヶ国以上マスターし、数多くの難関資格に一発合格してきた著者が指南。 大学受験高校受験難関資格試験の最強の武器になる記憶術。新タイプの記憶術。 従来のイメージ式記憶術を覆す、難関試験向けの論理記憶術。 商品価格:17800円 商品提
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く