1.はじめに 私は(筆者は)モバイルエンジニア転職を目指す立場です。個人的にアプリのUIデザイン知識はデザイナーだけでなくエンジニアにも必須だと思っています。私自身がアプリ開発の過程でデザインについて指摘され、「このままデザインに無知では良くないと思った」、「同じような立場の方にモバイルアプリのデザインの事を少しでも知ってもらいたいと思った」その2つの理由から本記事を執筆しました。 現在、エンジニアを目指している方やアプリ開発はしているけどモバイルデザインについて改めて知りたいという方、そのような方向けに改めてiOS・Android双方のデザインガイドラインについてまとめてみました。 2.iOSとAndroidのデザインの考え方 2020年現在、iOSではHuman Interface Guidelines、AndroidではMaterial Designの考え方をもとにアプリUIが作られ
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
iOS7が普及してきた今、フラットデザインに注目が集まっています。そんなフラットデザインのトレンドをすべて網羅した記事です。iPhone5S/5cも発売されてiOS7の普及も本格的になってきたってばよ! 俺もこないだとうとう5Sの予約したんだ! へ~そうなんだ~。(棒読み) 世間ではますますiOS7を意識したUIデザインに需要があつまるわね。 前回iOS7のデザインガイドラインについては 勉強したからバッチリだってばよ! バカね。 あれだけで満足してるなんてほんとバカ。 iOS7に沿ったデザインをするには フラットデザインをマスターする必要があるわ! フラットデザインって確かグラデーションやドロップシャドウを一切使わないデザインなんだよな! 勉強したから俺知ってるってばよ! 何時代遅れなこと言ってるの? 常日頃フラットデザインは進化してるのよ? フラットデザインが・・・ 進
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか?」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ(サイズ)を指します。 【第1部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
知り合いのデザイナーさんから「iOS&Androidアプリをデザインする時に何か知っておくべき事ってありますか?」と質問を受けたので、思い浮かんだ事をずらっと書いてみました。他にも何かありましたらコメントお願いします!ツッコミも歓迎(´ロ`) モバイルアプリデザインの原則とiOS 量が少し多いが、公式のiOSヒューマンインターフェイス ガイドラインは必読。(※ダウンロードに時間かかるので注意) iOSだけに限らず、モバイルアプリのデザインをするにあたって重要な事がまとまっている。 載っていること ヒューマンインターフェイスの原則 アプリケーション設計戦略 iOSテクノロジーの使用に関するガイドライン 標準で用意されている各UI要素(タブやツールバー等)の使い方 マルチスクリーン対応 どのような違いがあるのかを把握する 画面密度(ppi)や画面サイズなど 参考:iPhone, iPod to
40秒に根拠はないけど。 まあ、そんくらいじゃね?ってことで、今何となく流行っている「フラットデザイン」についてさくっと思うたけを述べます。 個人的には何かが流行るとそれに乗っかるだけでトレンディー気分を味わえるので、賛成も否定もしたくありません。トレンディー最高です。そういうミーハーな男なんです、ぼかぁ。 つーわけで、トレンディーじゃない人に対してあれこれしたアレではないという感じで、始めます。はい。 フラットデザインってなんや?ってことを最初にいわなければいけない気がしてますが、フラットデザインに関しては、「フラットデザイン」の逆と僕が思っているモノを説明することで事足りる気がしてます。 簡単にいうと、リッチデザインだわね。安直な名前で申し訳ないけど。 iPhoneのカメラ部分をまるっきり完コピしたレンズのイラスト、写真の背景の白い部分には壁の質感。床面のガラスの質感そして映り込み。簡
2013-11-07 UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 今回はUI/UXデザインについて触れてある記事やスライドで自分が実際に読んで参考になったと思ったものを備忘録としてまとめました。実際にUI/UXデザイナーの人や、僕と同じくUI/UXデザイナーを目指している人、また実際に興味がある人のお役に立てたら幸いです。 記事1 UI/UXの違いについて 5分でわかるUIとUXの違い : Excite Designer's Blog そもそもUIとUXは何が違うのかという事を知らない人もいると思います。 まずはUIとUXの違いについてはっきり知らなければなりません。 記事2 なぜUIとUXがよく混同されてしまうようになったのか UXとUIが混同されるワケ : could UIとUXが混同されてしまう理由について触れてある記事です。 僕も最初はUIとUXを混同
It's no secret that designers must start designing for mobile. With more and more people starting to browse the web from their phones, web designers have to get hip to making sites good and viewable on smartphones. It's imperative because we're not just taking a look online, but we as consumers are beginning to purchase, request info and more from our phones. And we have to be set up, as businesse
レスポンシブWEBデザインはその特徴から、レイアウトの自由度が低いと言われています。どのようなデザインにするのかは悩ましい問題とも言えるでしょう。 そこで今回は前回のレスポンシブWEBデザインの基本に続き、実際の事例とともにデザインや設計における注意点を紹介していきます。 1、各デバイスのサイズを把握しましょう! レスポンシブWEBデザインの最大の特徴はなんと言っても、色々な端末から見れるということ。設計する前に端末のサイズを把握していなければ、始まりません。 参考までに主要なディスプレイサイズを図にしてみました。 ユーザーがいつどんな環境でサイトを見るのか、考えてみることが大切ですね。 2、よく使うブレークポイントはこれだ! どの画面サイズでも見やすいサイトになるよう適切なブレークポイントを設定しましょう。 ちなみにSRE BLOGでは1160,1080,1024,985,960,940
2011年8月29日月曜日 カレンダーを生成するUIコンポーネントライブラリ for iOS カレンダーViewを作るのに参考になりそうなものを探している。 devinross/tapkulibrary - GitHub 標準カレンダーライクなUI カバービューなどいろんなViewを提供してくれるライブラリの一部にカレンダーがある。 klazuka/Kal - GitHub こっちも標準カレンダーライク muhku/calendar-ui - GitHub DayとWeeklyのViewがあるカレンダー damiandawber/DDCalendarView - GitHub シンプルな感じのカレンダー実装 標準でカレンダーViewを提供されてそうな気がしそうなんだけど、EventKitみたいなAPIぐらいしかないのかな。 他にもカレンダーViewを作るライブラリなどがあったらよろしくお願
なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く