iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
チート対策をするには何をすべきなのか？セキュリティソリューション開発会社DNPハイパーテックにチートの実態と性質を訊く（後編） - AUTOMATON
ホーム インタビュー チート対策をするには何をすべきなのか？セキュリティソリューション開発会社DNPハイパーテックにチートの実態と性質を訊く（後編）
DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
iOS 11 iPhone GUI from Design at Meta
Today, there are many user interface kits available for designers to speed up their work. However, few if any incorporate motion. This year, we’ve created Origami and Framer components that mirror the behavior of the most important UI elements in iOS 11 as well as recreating elements found in the public release of iOS 11 in Sketch and Photoshop. Whether using these files to mock up apps, concept i
プロのイラストレーターがiPadだけで1年間絵の仕事をしてわかった事 | Nomad Life
今回は久々のiPadの使用感のレビュー記事です。 Google検索でこのサイトに来てくださっている方はiPadは液タブとして使えるのかというところを気にして検索して来てくださっているようなので一年経った今回、改めて一年使ってみた使用感を書きます。自分でプロと名乗るのは少し恥ずかしいですがイラストの仕事して5年、フリーのイラストレーターとしては1年経ったのでいいかなと主にポジティブな感想になります。所々挟まる絵はiPadで描いたものです。 3年前の記事にもかかわらず、検索でこちらの記事を見てくださっている方が多いのでこちらでもアナウンスさせて頂きます。この3年間でiPad proは飛躍的に進化しているので最新の記事も合わせてご覧ください。こちらの記事で書いているiPa自体の魅力の部分は変わらないので是非読んでください。
iOSアプリ開発におけるイースターエッグのすすめ - NSBlogger
はじめに この記事はiOS Advent Calendar 2015 - Qiita 19日目の記事です。 昨日はhachinobuさんのMVVMっぽい構成のデモアプリを公開してみるでした。 本日はイースターエッグについて。 イースターエッグとは簡単にいうと隠し機能のことです。余裕のある開発者が仕込んだ粋なお遊びですね。 発見したときはついつい友達に教えたくなります。イースターエッグが仕込まれているアプリおよび実装例について紹介しますね。 イースターエッグの例 まず、イースターエッグが仕込まれているアプリをいくつか紹介しますね。 Google検索 「Google」という名前のGoogle検索アプリです。ロゴ部分をタップすると…！ ちなみにロゴが新しくなる前は、なぞるとロゴがバラバラになりました。 www.youtube.com スーモ 「スーモ」アプリには複数のイースターエッグが仕込まれて
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
Free Online Video Editor | Easy Editing with AI
*]:h-full xl:cursor-pointer xl:before:z-[-1] xl:before:content-[""] xl:before:block xl:before:w-[calc(100%+(0.65rem*2))] xl:before:h-full xl:hover:before:bg-global-nav-hover-background-accent [&[data-active="true"]]:xl:before:bg-global-nav-hover-background-accent xl:before:absolute xl:before:top-1/2 xl:before:left-1/2 xl:before:-translate-x-1/2 xl:before:-translate-y-1/2 xl:before:rounded-xl xl:tr
UXArchive - Made by Waldo
Introducing Sessions: the latest product from Waldo!
iOS7 iPhone Free Mockup - Andre Revin
Free iOS 7 iPhone Wireframe Toolkit for PrototypingI am excited to introduce Free iOS 7 iPhone Wireframe Toolkit for Prototyping. You can download the source file for free and use in their work. I hope it will be helpful to you. So easy to create prototype. 28 artboards size of 320 by 568 pixels. You can export each screen separately, and can see all the screens together with relationships. All ob
必見！iOS 8時代のiPhoneアプリ開発見積もりの8つのポイント Part2 | DevelopersIO
こんにちは！おおはしりきたけです。前回は、iPhoneアプリ開発見積もり時の8つのポイント Part1を書かせていただきました。Part1では、端末やOSなど外部的なポイントでしたが、今回のPart2では、内部的な4つのポイントを書かせていただきます。 5.デザイン デザインそのものが最初から決まっていることは少ないと思います。見積もり時のポイントは以下の点になります。 誰がデザインするのか？ 全て自社でやるのか、デザイン会社さんと一緒にやるのか、クライアントさんがやるのか、などデザイン作業を誰が行うかによって気をつけておくべきポイントはいくつかあります。 どのツールでデザインするか Illustrator、Photoshop、Sketch 3などどのツールで作成するのか。ツールは必ず合わせておきましょう。 パーツの切り出しは誰がやるのか デザイナーがやる？開発者がやる？作業効率の良い方法
モバイルアプリの最小タップサイズを考える | dotproof
モバイルアプリのUIデザインで難しいのはターゲットとなるデバイスの画面サイズに様々なサイズのものがあるということです。画面の大きさにはいろいろあっても人間の手や指のサイズはほぼ誰でも同じですから、どんな画面サイズであっても確実に押せるようなUIのサイズというのを把握してデザインしないと大変使いにくいものになってしまいます。 例えばiOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44ｘ44ポイントにしなさい」とし、サンプルとして電卓アプリの画面が紹介されています。 “Give tappable elements in your app a target area of about 44 x 44 points. The iPhone Calculator app is a good example of fingertip-size control
［CEDEC 2016］「デレステ」のグラフィックスは多種多様なスマホで60fpsの実現を目指した。開発陣のこだわりが見えた講演レポート - 4Gamer.net
［CEDEC 2016］「デレステ」のグラフィックスは多種多様なスマホで60fpsの実現を目指した。開発陣のこだわりが見えた講演レポート ライター：米田 聡 CEDEC 2016では，アイドルマスターシリーズに関するセッションがいくつか行われた。ネット配信が行われたものなどは，多くのファンが試聴したそうで，人気シリーズらしい関心の高さが窺える。 本稿ではシリーズ関連セッションから，最終日の2016年8月26日に行われた「アイドルマスター シンデレラガールズ スターライトステージ」（iOS / Android，以下 デレステ）の技術に関するセッションである，「アイドルマスターシンデレラガールズ スターライトステージ 制作事例・テクニカル編 − 多種多様なスマートフォンで5人のアイドルが躍動するライブの舞台裏 （60fpsリズムゲームの開発手法） −」の概要をレポートしよう。 タイトルどおり，
スーパーマリオ ラン
サクッと遊べるお気軽マリオ「リミックス10」 「リミックス10」は、10種類のショートコースをテンポよく遊ぶモード。10コース走り抜けた後の「ボーナスゲーム」では王国に配置できる特別なアイテムを手に入れることができます。 9種類の特別コース「ワールド★」 「ワールド★(スター)」は、全9コース。コースごとに決められたミッションを達成すると「森」、「コインのせんかん」、「お化け屋敷の外」など新たなコースが遊べるようになります。 2段ジャンプでコースを攻略!「デイジー」が登場! 「リミックス10」で迷子になったデイジーを見つけると仲間になります。「2段ジャンプ」を使って、これまでのキャラと違う操作感でコースを楽しめます。
UIとしてのスプラッシュ画面 | UXデザイン会社Standardのブログ
アプリケーションを起動した時に表示される画面をスプラッシュ（Splash）画面、またはローンチスクリーン（Launch Screen）と呼びます。アプリケーションにおいては、ユーザーが操作することのできない数少ない画面でもあります。 iOSではこのスプラッシュ画面はストア申請時に必須であり、使用するアプリケーションの向きや、対応デバイスのサイズに適しているものを提供する必要があります。個人的感覚ではありますが、いつもアプリケーションのビジュアルデザインや、アイコンのデザインが完了した後に即興で作られるということが多いのではないでしょうか。しかし、適当にスプラッシュ画面を作成するのではなく、サービスの性質や通信の有無などを考慮してデザインする必要があります。 ここで一旦、AppleのHuman Interface Guidelineを見てみましょう。 起動画像は、アプリケーションが起動するま
iPhone 6 & 6 plusのデザイン対応について【随時更新】 - デザインメモ
iPhone 6とiPhone 6 plusが発表されましたが、アプリのデザインを担当している私がもっとも気になるのが「今のアプリのデザインをどう変える必要があるのか？」。 実際、Appleは謎の解像度にしてしまったため、単純に拡大すれば良いってわけじゃなさそうなので、私なりに調べたこと・わかったことを随時更新していこうと思います！ 最終的には、こうしたら上手くいった！リデザインはこうしたら良い！までもっていけたらと思ってます。 目次 1、画面解像度について 2、画像サイズやデザイン作業について その他 1、画面解像度について 解像度などを比較するインフォグラフィックス ↓ 2014/09/16 up 海外でこんなサイトが公開されていました！ iPhone 6 Screens Demystified – PaintCode 解像度がわかりやすく紹介されています。 iPhone6 plusは
マーケティングリソースとアイデンティティに関するガイドライン - App Store - Apple Developer
推奨バッジ アプリを宣伝するマーケティングコミュニケーションでは、黒い推奨バッジを使用してください。黒いバッジの周囲にあるグレイのボーダーはバッジのアートワークの一部であり、変更は許可されていません。同じ場所で他のアプリプラットフォームのバッジを併用する場合は、黒い推奨バッジを使用してください。その際は、App Storeのバッジを最初に配置してください。 代替バッジ 多様なデザインに柔軟に対応できるよう、白い代替バッジも用意されています。黒い推奨バッジではレイアウトの見た目が重くなってしまう場合に使用することができます。白い代替バッジは、同じ場所でバッジを1つだけ使用し、かつレイアウト内で使用される他の色を補う場合に適しています。マーケティングコミュニケーションで他のアプリプラットフォームのバッジも表示する場合は、黒い推奨バッジを使用し、白い代替バッジは使用しないようにしてください。 ロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
UpLabs
スマホアプリの作り方【超まとめ】UI編：スマホアプリのデザイン／グラフィック描画に役立つ記事39選 - ＠IT