サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
design.classmethod.jp
近年、スマートフォンの普及が増えると同時に端末の種類も増えつつある中で、あらゆる端末に適応するウェブデザインについて考え直され始めています。その中で、2010年5月、米国のイーサン・マルコッテ氏によって提唱された「レスポンシブWebデザイン」という制作手法が海外から注目され始めてきています。「レスポンシブWebデザイン」とは、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます(※1)。これは、ユーザーにはもちろん、制作者に対してもメリットのある制作手法であるので、今後はより必要性が高まるのではないかと思われます。なお、これからはウェブサイトを作っていく必要がある理由がこちらでよりわかりやすく説
解像度は徐々に上がっているので、最近は xhdpi の機種がどんどん増えてきています。 Android4.0を搭載している端末のほとんどは hdpi か xhdpi になっていると思います。 近いうちに xhdpi より高い画面密度の端末が出てくるかもしれませんね。 デザインアセットは3つ用意しなければいけない! 端末の画面密度がさまざまだということがわかりましたが、 ボタンのスキンなどのようなデザインアセットは原則的に 1パーツにつき画面密度ごとに3種類用意する必要があります。 3種類とは、 mdpi と hdpi と xhdpi です(ldpiは対象端末が少ないので、重点的に対応する必要はないと思います)。 画面密度ごとにファイルを用意しないと各端末で綺麗に表示させることができません。 ボタンスキンやアイコンなどのアセットファイルが対象になると思います。 画像ファイルのサ
情報デザインにおける大切な要素のひとつとして、「Data Visialization」があります。これは、数々の情報をビジュアルで表現することで内容を誰にでも分かりやすく見せる方法で、別名「インフォグラフィック」と呼ばれます。インフォグラッフィックは言語や文化を超えた共通用語として幅広くデザインに用いられています。そこで今回はインフォグラフィックに着目し、数多く紹介しているサイトをご紹介します。 Visually Inc. 海外のインフォグラフィックを紹介しているサイトです。 魅力的なインフォグラフイックが数々揃っているところがポイントです。数時間置きに更新されているので、常に目が離せません。 Transparency|GOOD 海外のインフォグラフィックを紹介しているサイトです。こちらもセンスのあるインフォグラフィックが多数揃っていて、見る人を飽きさせません。個人的に好きなサイトです。
■はじめに これまでのシステム開発の現場では、多機能化や高機能化といった点に重点がおかれてきました。その為、機能が非常に多くなったり学習しなければ使えないような製品やサービスが増え、ユーザーの使い勝手や生産性、モチベーションを下げる原因にもなっています。それらを改善する目的で、近年アプリケーション開発の現場に「ユーザーエクスペリエンス」という考えが普及・浸透しつつあります。 「ユーザーエクスペリエンス(以下、UX)」は、2005年に認知心理学の第一人者であるD.A.ノーマン博士によって提唱されました。ノーマン博士はUXの第一要件は「混乱や面倒なしで顧客の的確なニーズを満たす事」、第二要件として「所有する楽しさ、使用する楽しさを生み出す『簡潔さと優雅さ』」を定義としています。※1 では具体的にどういったものがUXとされているのでしょうか。今回は私たちの身近な日常生活の中でUXを提供しているも
TypeTalks(タイポグラフィセミナー)の「HelveticaやDINだけじゃない!フォント鑑定人がおすすめする最新欧文フォント事情」に参加してきました。 嘉瑞工房の高岡昌生さんがモデレーターで、MyFonts.comのWTF forumでコントリビューターをされている@akira1975さん、有名なフォントサイト(PETITBOYS)を運営されているヤマダコウスケさんのお二人のほか、ドイツ、linotype社タイプディレクターの小林 章さんがskypeで参加されるという、フォント好きには嬉しい面々が講演者でした。 この日の内容は「Helvetica」や「DIN」のオルタナティブになりうる欧文書体とそれら書体の制作と販売を行うFont Foundryの紹介。 トークショー冒頭に講演者の方からの質問がありましたが、デザイナーが普段メインで使用する書体は大体5~10書体程度、それも同じもの
どうも昨日はせんと・ばれん・あ・たいとかってイベントだったですね。 うっかり忘れてました、えぇ。うっかり…..うっかり……うっ さて、いつもどうも。えさしかです。 最近の傾向としてユーザーインターフェイス(UI)/ユーザーエクスペリエンス(UX)を課題と認識され、UI/UXの課題解決のご相談をいただくことが増えてきました。 弊社の場合デザインもできるシステム屋さん。という認知の方が多かったと思います。 そんな中でいざUI/UXからシステム設計(要件定義)にアプローチをかけても、どこから手を出せばよいのか?自分達の選択が正しいのか?というご相談が多いです。 何からはじめるの? おそらく、教科書に載ってるフローどおりで問題ないです。 現状分析を行う ペルソナを立てる ストーリーボードを作る ワイヤーフレーム ビジュアルデザインだったりモック作成だったり ワイヤー作成とビジュアルからはイテレーシ
どうも、豊満鳩胸ボディで有名な江刺家です。 前回、目に優しいUIとして俯瞰気味にデザインの考え方について投稿しましたが 今回は具体的な「色」について語ってみたいと思います。 ※できればパソコンで見ていただけるといろいろな効果について共感いただけると思います。 スマホの方は文字だけでご勘弁くださいw 前回の記事では「白:黒」を悪者のように書いてしまったことを反省しているのですが、決して「白:黒」は悪い子ではないとこの場を借りて弁解させていただきます(笑 ようは使い方の話ですし、前回は人間の「目=標準反射率」の話がしたく引き合いに出したため、悪者のように書いてしまいました。今回は「白」も「黒」もフラットな立ち位置から「色の効果」と「色の錯覚を使う」事について語っていきたいと思います。 まず、いきなり抽象的な話になりますが「色に重力がある」ことをご存知でしょうか? あいにく物理的な(吸引力)
前回までは全体的なデザインレイアウトのご紹介をしましたが、今回はもう少し掘り下げたデザインのご紹介をします。 今回は、はじめに入力フォームのデザインTipsのまとめのご紹介と、フォーム参考となるサイトをご紹介します。 フォームデザインTipsまとめ Tips1.クリーン&シンプルを目指しましょう。 ・スクリーンサイズを基本として、スクロールするほどの多量な欄はなるべく避けましょう。 ・余計な情報表示は避け、必要最低限の情報表示を心がけましょう。 ・入力部分の背景は、なるべくホワイトスペースにしましょう。 ・フォームの並びは、複雑な並びは避け、縦一列に整列させるのが望ましいでしょう。 ・ユーザーの入力の手間の省略可のため、選択可能なチェックボックスやラジオボタン、コンボボックスを使用するのが望ましいでしょう。 提供元:Twitter:login Tips2.フォント使いに注意しましょう。 ・
先日「第6回スクラムプロダクトオーナー勉強会」のプラグマティック・ペルソナのワークショップに参加して思ったこと。 プラグマティック・ペルソナはペルソナの情報を以下の4項目だけ記述します。 ・顔、名前 ・About:その人について ・Context:その人がサービスを利用するにいたった経緯 ・Implication:サービスやプロダクトがそれをできることによって嬉しくなるの「それ」 こうやって書くとなんだ簡単じゃんって思えるのですが、実際やってみると、About、Context、Implication が混ざったりします。何人か分のペルソナを書いてみれば慣れて混ざらなくなる(上手く分離できるようになる)と思いますが、いずれにしても練習は必要そうです。 これについてはKPT(ふりかえり手法の一種で良かったこと、悪かったこと、次やること の三種類に分類する)でも言えるのですが、慣れていないとPと
取り組む企業の課題例 顧客から圧倒的に支持される、新規事業を創出したい 既存サービスの顧客体験をより良いものにしたい 顧客流出を止めたい。顧客が続けられるサービスにしたい 広告に頼らず、サービスの本質的な改善で新規顧客を獲得したい 既にあるサービスにおける企画の実現可能性を知りたい サービスの企画イメージを詰めたい A :新規サービス立ち上げ / 既存サービス改修サービス まず、顧客接点とその構造を深く調査・分析することで顧客が喜んで対価を払うような「ベネフィット」や他のサービスを使わない理由となる「オリジナリティ」を見出します。 それらの「ベネフィット」と「オリジナリティ」を新規サービスや、既存サービスに実装していくことで、新規顧客の獲得、既存顧客の維持・育成を実現しサービスをより広く展開するお手伝いをします。 Service flow リサーチ 解決したい課題に応じて「ネットリサーチ」
今回も前回の続きとして、デザインの参考となるサイトのご紹介です。 今回は、iPhoneでのサイトデザインの紹介サイトをいくつかご紹介します。 iPhone Design Box 国内中心のiPhoneサイトデザインの紹介サイトです。個性的なアプリやデザインの種類が豊富で、柔軟性を養うことができます。 CSS iPhone 国外のiPhoneサイトデザインの紹介サイトです。こちらも個性的なUIばかりで、さらっと見るだけで洗練された上質デザインのインスピレーションを受けることができます。 AGT smartphone design gallery 国内外の企業系サイトが多数紹介されています。更新頻度が高く、マウスオーバーだけで画面の隅々まで見渡せるようになっています。一覧ページで各サイトの全体的なデザインを見たい人にはとても嬉しいサイトです。 iPhoneサイトデザイン集のiPhoneデザイン
サンプル 実際に指定してみるとこんな感じです。 一応ベンダープレフィックスの指定もしておきます。 -webkit-box-shadow : 1px 1px 5px #ccc; -moz-box-shadow : 1px 1px 5px #ccc; box-shadow : 1px 1px 5px #ccc; また、Box Shadowは複数指定することもできます。複数指定する場合は「,」カンマで区切るだけです。 -webkit-box-shadow : inset 1px 1px 5px #ccc, 1px 1px 5px #ccc; -moz-box-shadow : inset 1px 1px 5px #ccc, 1px 1px 5px #ccc; box-shadow : inset 1px 1px 5px #ccc, 1px 1px 5px #ccc; これではただの陰をつけただ
Webサイトの制作、運用時に写真素材を利用する機会は多々あると思います。 すんなりとイメージに合う写真素材が見つかれば良いのですが、なかなかそうもいきません。 実態のあるプロダクトの場合は、プロのカメラマンに依頼をして撮影を行ったり、精密な3Dイメージを作成することもあると思います。 そこで無料・有料写真素材サイトを調べてみました。 素材を得る方法は、大きく分けて3つあります。 無料の素材提供サイトから探す 有料の素材販売サイトから探す プロのカメラマン、スタジオに依頼する 自身で撮影する 下にいけばいくほど敷居が高いです。 無料の素材が一番手軽ですが、あまりにチープに見えたり、イメージに合っていない素材を使うことは本末転倒です。写真のイメージがユーザーに与える影響はとても大きい。 許される範囲でイメージの合った素材を得たいと思いますよね。 この記事を書く前にいろいろな写真素材のサイ
このページを最初にブックマークしてみませんか?
『CXDC | Classmethod Experience Design Center』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く