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

Browse By

Tag Archives: iPhone

[Freebie] Sketch – Element UI Kit – iPhone XのSketch用UIテンプレート

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

iPhone XのUIデザインに便利なUIテンプレートを、Sketch Teamが配布してます。ダウンロードすると様々な場面を想定した画面テンプレートが用意されていて、全画面でiPhone Xの切り欠きや角丸の部分にマスクがされいるので、AppのiPhone X対応を行う時なんかに使えそうです。またPages内、App以外にSymbolsというのも用意されており、ここではiOSのデフォルトUIパーツに加え、独自のアイコンやシェイプ、ナビゲーションパーツが用意されています。SketchベースでUIデザイン起こす時にイイですねこれ。

[Generator] iPhone Screenshot Maker – iPhoneと任意の画像のハメ込み合成を作れるサイト

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

iPhoneのディスプレイ部分に、任意の画像をハメ込み合成できるサイト。iPhone以外にもiPad、Mac、AppleWatchなどもあります。あとなぜかゲームボーイもあります。各端末の解像度はサイト内に書いてありますが、サイズが違っていた場合にどうするかなどの細かいオプションなども指定できます。Photoshopが手元にない時や、ノンデザイナー系の人にオススメ。

[iPhone 7] MVNO回線移行のための試算表作りました

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

さぁ発表されましたiPhone 7。今回はどちらかというとビッグマイナーチェンジって感じですけど、基本的に偶数年にあいぽん買い換える自分は買うつもりです。で、このタイミングでMVNO回線に移行しようとしてる人って結構多いと思うので、Googleスプレッドシートで試算表を作りました。1ヶ月あたりの通信費に今使ってる回線費用とMVNOのプランを入力して、欲しいiPhoneの値段を選べば、2年を通して支払う総額が出るようになっています。あと必要に応じて下取り金額は調整してください。自分はmineo回線使おうと思ってるのですが、今のままau回線+機種変ナシの状態と、AppleからSIMフリー機買ってMVNOで2年運用するのとであまり変わらない金額になりました。
表内にはすでにいくつか数値が入っていますが、今持ってる機種やMVNOの会社やプラン、今のキャリアなどの条件によって色々変わると思うので、そこは各々調整してください。スプレッドシート内のメニュー、「ファイル>コピーを作成」から自分のGoogle Driveにコピーしてお使いください。

[Misc] Hey Siri What can you do for me? – Siriたんにお願いできる事一覧

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

みんな大好きSiriたんにお願いできる事を一覧にしたページ。普段セクハラばかり受けているSiriたんも、お願いの仕方によってはちゃんと仕事する事ができます。いくつか紹介すると、例えば単位の変換、計算、起動を含むアプリの操作、デバイスのコントロール、ホームキット、コンタクトの確認や電話、メッセージング、SNSへの投稿、予定やリマインダーの登録、アラームやタイマー、天気、検索、翻訳、音楽の操作など。読んでたら結構知らないものもありました。最後の「Funny」の項目はネタ系の質問。こうして見ると結構便利なんだけど、それでもやっぱりセクハラするのが一番楽しいですな。

[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のアカウントがいるみたいです。

[Web Design] mydevice.io – 各種タッチデバイスのディスプレイ仕様を一覧で見れるサイト

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

各種タッチデバイスのディスプレイ仕様を一覧で見る事のできるサイト。というかトップページはココで、そちらでは自分が使っているブラウザの仕様を見る事ができるというものなんだけど、個人的にこっちのデバイス確認ページの方が便利だなーと思ったのでこちらを紹介。論理ピクセル数、物理ピクセル数に加えて、ピクセルレシオやPPIについても紹介されています。表のヘッダーをクリックするとソートし直しもできます。モバイルサイトデザインする時の指標として使えそうです。

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

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

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

[Mockup] Diverse Device Hands – タッチデバイスを手に持った状態の画像素材

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

各種スマホを手に持った状態の画像素材を、Facebookが公式に配布してます。機種はiPhone 6s、Microsoft Lumia 950、Nexus 5x、Samsung Galaxy Note 5の4つで、それぞれ4つのバリエーションが用意されています。ダウンロードするとSketchフォーマットと透過PNGのものが一式入っており、Sketchの方はディスプレイ部分がマスク処理されているので、画面デザインのハメ込みもサクっとできそうです。全機種に4パターンの肌色バリエーションを用意している点が、Facebook公式の素材っぽいなーとか思いました。モバイルAppの紹介ページなどで使えそうです。