Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: iOS

[Sketch Plugin] Egmont plugin – SketchでiOS角丸を描けるようになるプラグイン

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 7から変わったアイコンの角丸のカーブを、Sketch内でも描画できるようになるプラグイン。サイト内では「Squircle shapes」と言われていますが、どうやらこれ「Square Circle」の事みたいです。ただ角がラウンドした四角形ではなく、カーブの始まりは緩やかで徐々にキツくなっていくという、独特のシェイプの事を指しているようです。実際このカーブって簡単に描けないので、数値指定するだけで描画できるようになるこのプラグインは、iOS AppのUI制作には便利に使えそうです。ちなみに通常の角丸とSquircle角丸の違いはこのGif見ると分かりやすいかも。

[Freebie] App Icon Template for Sketch – iOS, Android用のアイコンテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

Sketch用の、iOS / Andoroidアイコンテンプレート。編集から各サイズへの書き出しまで行う事ができます。またアイコンのコアな部分はシンボル化されているので(Photoshopで言うスマートオブジェクトみたいなもの)、1つ変更すれば全部変わります(iOSとAndroidでは共有化されていないようです)。それぞれデバイスのホーム画面やAppStoreではどのように見えるかのプレビューもできるようになっているので、確認しながら作りこむ事ができます。アイコン制作する時に使えそうです。

[UI Design] iOS Human Interface Guidelines – Apple純正のiOSテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

Apple純正のiOS 10用各種テンプレートを用意したページ。App IconやiMessage App Icon、3Dタッチデバイスのクイックアクション用のPSDなどが配布されています。iMessage Appってなんやろ?って思って調べたら、どうもこの画面の時に使われるアイコンのようです。AppアイコンのPSD以外にも、San Franciscoフォントやタイポ作例一覧のPSDなんかも配布されています。ただしダウンロードするにはApple Developer Programのアカウントがいるみたいです。

[Apple] iOS 10 Default Wallpaper – iOS 10のデフォルト壁紙(多分)

  • Pocket
  • このエントリーをはてなブックマークに追加

WWDCやAppleのサイト内でシレっと使われてる、次のiOSでデフォルトの壁紙になる(であろう)画像を見つけました。imgurで共有されてます。正方形トリミングなのでiPadでもiPhoneでも使えますが、iPhone用にトリミングされた縦長のものはこちらにあります。なんかアレですよね、波系好きですよねApple。

[Design Gallery] Hey User – モバイルApp初回起動時のチュートリアルを、ビデオで紹介するギャラリーサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

モバイルアプリの多くが表示する、初回起動時のチュートリアル画面を動画で紹介するギャラリーサイト。アプリ導入の際に、ユーザーに対してどのように使えばイイのかを紹介する大事な機会なので、どのアプリも丁寧で凝った説明、演出をしています。またココの部分にコストかけてるなーという作例も多く見られます。この場面でヘマするとせっかくダウンロードしてくれたユーザーにそっぽ向かれちゃうので当然と言えば当然ですね。このサイトは動画で見れる点が特徴で、トランジションなども含めて他社製アプリの作例を研究できます。チュートリアル制作のネタ探しに使えそうです。

[Freebie] Bjango App Icon Templates – 各種モバイルAppのアイコンテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

モバイルAppとか作ってるBjangoが、各種モバイルデバイス向けAppアイコンのテンプレートファイルを配布しています。iPhoneやiPadなどのiOSに加え、AppleTVのtvOS、Apple WatchのwatchOS用テンプレートも入ってます。あとAndroid用のものも。ダウンロードするとフォルダごとに各種フォーマットが整理されており、PhotoshopやIllustrator以外にSketchやAffinity Designer用のものまで入ってます。最近じゃSketchやAffinityでデザインする人も多いですからね。対応デバイスの数やフォーマットの多さを考えると、コレ系のアプリアイコンテンプレートとしては最強なんじゃないでしょうか。ホーム画面に置いた時のシミュレートとかを考えるとPixelresortのテンプレートとかもイイんですけどね。

[UI Design] Designing for iOS 9 – iOS 9 Appデザインのための分かりやすいガイドライン

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 9向けにアプリをデザインする際に役立つ、UIガイドラインを分かりやすくまとめた記事。まぁApple純正のガイドライン読めば分かるっていえば分かるんですが、ここではその中でも特に重要な点を画像を使って分かりやすくまとめられているのがナイス。レイアウト、フォント、ディスプレイ解像度、スプリットビュー、アイコンのサイズやグリッド、カラー、ボタンやフォントのサイズについて、スペーシングやアライン、マージン、各種純正パーツのサイズ、キーボードなどについて端的に仕様を紹介しています。また記事最下部にはiPhoneやiPad、Apple WatchなどのGUIテンプレートへのリンクなども紹介されており、なかなか気の利いた記事だと思います。UIデザイナーの方にひとつ。

[Emoji] Middle Finger Emoji – iOS 9.1で追加された中指おっ立て絵文字

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 9.1とMacOS 10.11.1が公開されましたね。今回は双方共にひとつ大きなアップデートがあります。それは絵文字の追加。150個の絵文字が増えているそうです。自分はオッサンなので普段は特に絵文字とか使いませんが、個人的にとてもアツい絵文字があるのです。それは「Middle Finger」というもので、早い話が中指を立てたアレでございます。いやこの絵文字がUnicodeとして実装されるなんて優秀なアップデートじゃありませんか。とても実用的! すぐにでも使いたい! けどiPhoneでは絵文字リストからすぐ出せるけど、Macからどうやって出すのか分かんねぇ! というわけで探してみたところ、このMiddle Finger専門のTwitterアカウントを発見しました。もうほとんど中指アイコンしか発言しておりません。とてもお下品! というわけでMacから中指絵文字をタイプしたいけどやり方分かんねぇという人、このTwitterアカウントからコピペすると出せますよ。俺は早速単語登録しました。あらゆる絵文字の中で最も実用的なんじゃないか、とさえ思いますコレ。いやぁ素晴らしい。