Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 | アプリマーケティング研究所
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 今回は350万ダウンロード突破、家計簿アプリの「Zaim」さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim 代表取締役 閑歳 孝子さん。 「Zaim」の近況について 「Zaim」のユーザー数は今どのぐらいですか？ 閑歳： 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。 今までに、ユーザーが大きく伸びたタイミングはありますか？ 閑歳： 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが本当につかうようになって、すごく高齢者と若年層が増えました。 データ
レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由 - セルバマーケティングブログ
アクセスしてきたユーザーの画面サイズによってページの表示レイアウトを切り替える「レスポンシブデザイン」。一見非常に良さそうに見えるこちらの手法ですが、最近では、新規にウェブサイトを構築する場合、避けた方が良い＝PCとスマホのページは分けて作った方が良いと考えられています。今回は、スマホとPCサイトを分けて作った方が良い3つの理由についてご説明します。 １）コストが増える 1つのファイルでPCとスマホのサイトをうまく表示させるのは、非常に複雑な作業です。CSSで調整を行っていくことになりますが、これは別々のサイトを作るよりも手間のかかる方法で、制作コストが高くなってしまいます。 また、採用したい表示方法があっても、端末によっては表示できないため、機能の制約も大きくなります。さらに、完成した後も表示の不具合が多いのが現状です。実際テストしてみると、「これは割にあわない」となる場合が多くあります
半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。
PNG32bit(24bitアルファ付き)画像では、8ビット(256階調)の透明度が各ピクセルに割り当てられていますので、ドロップシャドウの部分も綺麗に再現されます。 GIFやPNG8ではアルファ値は1ビットですのでONまたはOFFの2階調しかありません。よって、透過を活かしたアイコンが作りにくく、どうしても汚い画像になってしまいます。 アイコンには 16x16 , 32x32 , 48x48 , 96x96 , 128x128 等の複数の画像を含めるようにしましょう。表示環境によって、より適した画像が表示されます。 ファビコンを作成の方へ： 16x16の画像を含ませて、ファイル名をfavicon.icoに変更すれば完成です(任意のファイル名でもOK)。 favicon(ファビコン)とはウェブサイトやウェブページに関連付けられたアイコンのことです。 faviconは日本では「ファビコン」と
iconmonstr - Free simple icons for your next project
To use this icon, you must first accept the license agreement.
0から学ぶアプリの配色 - Rejasupoem
当方Androidエンジニアをしておりますが、プライベートでアプリを作るとき、画像リソースについてはAndroid組み込みのものを使ったり、Fontawesomeを使ったり、フリー素材を使ったりしています。 しかし配色はインターネットに落ちていなくて、自分でやるとイマイチで、いい感じにしたいという気持ちがありました。 そこで、調べたり試行錯誤をして知見が得られたので、配色に悩むエンジニアのために共有します。 3行まとめ デザインはセンスで行うものではなくロジックで成り立ってる、つまり努力でなんとかできる Color Scheme Designer 3 便利 配色を学ぶのには下のスライドが一番分かりやすかった 色彩センスのいらない配色講座 from Mariko Yamaguchi STEP 1. 対象に興味を持つ 〜〜で必要だから勉強しなければって始めてたものが長く続いたことがないので、
フラットデザイン入門② 『フラットデザインの流行性と必然性』 | ajike switch
こんにちは、はきりです。 3日連載のフラットデザイン入門、 初日は『フラットデザインは混合している』でした。 本日は2日目、『フラットデザインの流行性と必然性』です。 では早速どうぞ！ CIから見る流行としてのフラットデザイン もともとフラットデザインと呼ばれているデザインの台頭はwebに限らずグラフィックでも同様の兆しがあります。（グラフィックの人は「フラットデザイン」という言葉遣いも意識もしていない気がしますが）特に時代性を表すCIデザインの分野ではこの傾向は見られ、フラットなCIを導入しているケースが見られるようになってきました。最近リニューアルされたCIから見える『フラットデザイン化』の流れを探してみたいと思います。 CIとは…企業文化を構築し特性や独自性を統一されたイメージやデザイン、またわかりやすいメッセージで発信し社会と共有することで存在価値を高めていく企業戦略のひとつ。企業
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
GoogleのアイコンなどのデザインガイドラインをGoogleのデザイナーが公開中
ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。 Google Visual Assets Guidelines - Part 1 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 Google Visual Assets Guidelines - Part 2 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidel
Almost Flat UI
Provides extra visual weight and identifies the primary action in a set of buttons
UIデザイナーが知っておくべきエンドユーザーの10の特徴
ユーザーの視点に立ってデザインされていないインターフェースは、エンドユーザーに受け入れてもらえないはずだ。そこで本記事では、UIデザイナーが念頭に置いておくべきユーザーの習慣や考え方について焦点を当てる。 つい最近、「Ubuntu Unity」はUbuntuに正式搭載されてから1周年を迎えた。また、「Windows 8」はリリースを間近に控えている。こういった状況のなか、すべてのユーザーインターフェース（UI）は同じように作られていないという事実が明らかになってきている。実際のところ、コンピュータの使い方に革命的な変化をもたらすような素晴らしいUIデザインもあり得るだろうが、エンドユーザーを念頭に置いていないものは、その素晴らしさを証明する間もなく失敗作という烙印を押されてしまうはずだ。 筆者は長年に渡るコンピュータ経験のなかで、ほとんどすべてのLinuxデスクトップと、あらゆるバージョン
センスのいらないUIデザイン（１） よいデザインの４原則 | エンジニア開発記
iPhoneアプリのUIデザインは重要です。 よいUIは使いやすくそれだけで好まれることもありますが、UIが悪ければ使ってすらもらえないこともあります。 使いやすいUIを作るにはセンスが問われるわけですが、センスとはあいまいなものです。 センスからあいまいさを取り除き、なぜそれが良いデザインなのか、どこがいいのかを追求すると、それは学問となります。 学問としてデザインを学ぶとセンスが必要なくなるだけでなく、ぶれることなくいつでもよいデザインを作ることができるようになります。 UIを学問ととらえたときにいくつか重要な事柄があるので、何回かに分けて紹介したいと思います。 ドナルド・A・ノーマンのよいデザインの４原則 ドナルド・A・ノーマンのよいデザインの４原則というのがあります。 可視性 よい概念モデル よい対応付け フィードバック この４つをわかっているだけでもかなり使いやすいUIデザインが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
心地よいUIの温度 - 言葉と気遣いで高めるUI -
[UX]は投げ捨てろ！![[UX]は投げ捨てろ！](https://cdn-ak-scissors.b.st-hatena.com/image/square/d35e44c1834305f0f591517f44342e50419b879c/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fsendai-150131020702-conversion-gate01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
流行に乗っていいの？フラットデザインの落とし穴
Flat UI - Free Bootstrap Framework and Theme
ノンデザイナーのための配色理論
デザイン勉強会「簡単に名刺作ろうぜ」by woopsdez
