フェンリル

Developer's Blog

iPhone デザイン アーカイブ

Android TV/Apple TVのUIデザインにグッときた!

 

Fenrir Advent Calendar 2016

 

こんにちは。 デザイン部の四倉です。

Fenrir Advent Calendar 2016」の 24 日目の今日は、クリスマス・イブですね。皆さんいかがお過ごしでしょうか。

 

Android TV / Apple TV

今年は個人的に、スマートフォン/タブレットの UI デザイン以外に、Android TV/Apple TV のアプリデザインをたくさん手がけました。

2016 年の今でこそ、スマートフォンの UI デザインの情報は検索すればいくらでも手に入りますが、私がアプリの UI デザインをはじめた頃は本当に情報が無く、それこそフェンリルのブログなどを参考にしていたことを思い出します。

Android TV/Apple TV の設計をしていると、思いもよらぬところで時間をとられたりして、良くも悪くもそんな昔のことが思い出されるような楽しさがあります。

 

Android TV/Apple TV は、みんな大好きな Google と Apple が設計したセット・トップ・ボックス(以下 STB )ですから、そのデザイン思想は折り紙付きです。 フェンリルアドベントカレンダーのテーマ「2016 年にグッときたコレ」にちなんで、その素晴らしい UI デザインの一端をお伝えしたいと思います。

続きを読む

1pixel のこだわりを可能にするデバッグツール Peek!

Fenrir Advent Calendar 2016

 

こんにちは。品質管理部の弓削です。
あっという間に Fenrir Advent Calendar 2016 も16日目です。

きらびやかなイルミネーションが目にも心にも刺さってきますが、この時期になると後輩から「クリスマスは悲しみしか連れてこない」と言われたのを思い出します。

と、先にわたしの中で殿堂入り済みのグッとくるセリフを紹介してしまいましたが、今回はレイアウト検証時に起きる問題と、それを劇的に解消してくれ、2016 年最もグッときたレイアウトデバッグツール「Peek」をご紹介いたします。

続きを読む

Mobile Act Nagoya #2 を開催します

 MobileActNAGOYA-1

こんにちは!名古屋支社 エンジニア 早川です。

Mobile Act Nagoya #2 ということで、第2回目の モバイル関連勉強会を開催します。

続きを読む

名古屋でモバイル勉強会 Mobile Act NAGOYA #1 を開催しました!

Mobile_Act_Nagoya_1_top

Mobile_Act_Nagoya_Logo

こんにちは!名古屋支社でアプリ開発を担当している小林です。

名古屋でモバイル関連の勉強会をやります で告知した Mobile Act NAGOYA #1 を 7 月 29 日に開催しました!最終的には約 20 名もの方々に集まっていただき、名古屋もモバイルアプリ開発が熱いぞ!というのを実感できました。

続きを読む

名古屋でモバイル関連の勉強会をやります

MobileActNAGOYA

 

こんにちは、名古屋支社の眞弓です。

7/29 (金) 19:00 から Mobile Act NAGOYA という勉強会を開催します。

続きを読む

Web デザインにも使える! Illustrator の魅力再発見!

Fenrir Advent Calendar 2015

こんにちは:)デザイナーの牧村です。

この記事は Fenrir Advent Calendar 2015の最終日、25日目の記事です。

デザイナーの皆さんは、デザインデータを作る際、どのツールを使っていますか?

私は今年から Illustrator を Web デザインで使用しはじめた結果、 Illustrator の便利さに感動して、メインのデザインツールになりました。

そんなわけで、今日の「2015年にグッときたコレ」では、以前 Photoshop をメインで使用していた私が、 Illustrator を使ってグッときたポイントをご紹介します!

続きを読む

新米パパがグッときた!本当に役立つ妊娠・子育てアプリ

Fenrir Advent Calendar 2015

今日は、Fenrir Advent Calendar 2015 の 15 日目!

こんにちは。デザイナーの長野です。先日、第一子が生まれて、子育てにあたふたしています。今日は、妊娠中から育児中の現在までに使用したアプリの中で、役に立った!グッときた!アプリをご紹介します。

続きを読む

アイデアのつくり方

 a technique for producing ideas

企画 / デザイン担当の中田です。
突然ですが、「アイデアのつくり方」ってご存知ですか?

そのままのタイトルで「アイデアのつくり方」という本があります。広告やクリエイティブ業界では、とても有名な本です。早い人なら1時間くらいで読めて、アイデアの作り方の本質が学べるオススメ本です。

先日ふとした会話の中で、この本の名前が出たので、久しぶりに読み返しました。
普段の仕事の流れを、客観的に考える良い機会になったのでシェアしたいと思います。

続きを読む

縦が長くなったiPhone 5への対応方法

ホーム

デザイン担当の高取です。
iPhone5を手にして1ヶ月以上経ち、 縦に長くなった画面サイズにもだいぶ慣れてきました。iPhone4を見るとむしろ短く感じるくらいです。

iPhone5では以前のiPhoneに比べて縦が長く領域がナビゲーションバー2つぶん広がっています。したがって、これまでのiPhoneでも問題なく使用でき、かつiPhone5の縦の長さにも対応したアプリケーションを制作するには、この長くなった領域分に関して工夫が必要です。

それでは、どのように対応すればよいでしょうか。

続きを読む

縦長になって引っ張りやすくなった iPhone 5 で、色んな「引っ張って更新」を比べてみよう!

Pull to Refresh

こんにちは!UI デザインの松野です。

今日は iPhone 5 の発売日ですね!フェンリルでも長いとか軽いとか、実機テストしたりとかでいつもより少しだけ賑やかです。

もちろん Sleipnir や他の iOS アプリも、この新しい iPhone 5 に(もうすぐ)対応します。Sleipnir Mobile for iPhone / iPad、Sleipnir Linker、FlickAddress のアップデートを準備/申請中です。リリースまで今しばらくお待ちください!

さて、そんな iPhone で特徴的な操作のひとつに “引っ張って更新(Pull to Refresh)” があります。

ちょうど先日 iOS 6 でもメールアプリで採用されたことですし、今日は引っ張って更新について取り上げてみようと思います。

引っ張って更新って?

Pull to Refresh

引っ張って…

Pull to Refresh

離す!

続きを読む

タッチ操作に適したドラッグ

Touch and Drag

画面上に並んだものを並べ替えたりするときには、ドラッグアンドドロップはとても理解しやすい操作方法です。特に、指で操作対象を直接扱える iOS はドラッグと相性がよいといえます。しかしその反面、”画面が指で隠れる” という制約も強く受けることを気に留めておく必要があります。今回は、iOS アプリで使いやすいドラッグを実現するためのポイントをいくつか挙げてみます。

続きを読む

Retina サイズの調整

Retina サイズとは、3G サイズ( 320px × 480px )の2倍の解像度( 640px × 960px )のことです。

単純に縮小拡大すると、せっかくのデザインもぼけてしまい台無しになってしまいます。

実際に私がしていることは下記になります。

  • ボタンや線などは出来る限りパスで描く。
  • アイコンもパスにする。
  • 写真を使っているところは最初からRetinaサイズでつくる。
  • 最後は目で見て微調整。

続きを読む

要素の配置について

以前、ボタンの UI についてで、使いやすいアプリケーションを作るためには「細かい部分の使い勝手の追求」が大切、というお話しをしました。今回はその続編で、ボタンなどの要素の配置についてご紹介します。

続きを読む

ドリルダウンか?モーダルか?

ここに、テーブルに並んだデータのタイトルを付ける画面があります。

「この画面は横にドリルダウンしてたどり着くべきか、はたまたモーダルで開くべきか」

Navigation or Modal

iOS アプリの UI を考えたことがあれば、何度も出くわす問いです。テーブルのデータをユーザーが編集したり新規作成したりするのはよくある話ですね!どちらがベストか悩んだときは、その画面の役割や操作感の違いに注目することでヒントが得られます。

続きを読む

アプリケーションアイコン

アプリケーションアイコンとは、iPhone / iPad / iPod touch のホームに表示されるアイコンのことです。作成する際のサイズは

  • Retina 画面以外用 :57ピクセル × 57ピクセル
  • Retina 画面用   :114ピクセル × 114ピクセル
  • iPad 用      :72ピクセル × 72ピクセル
  • App Store 申請用: 512ピクセル × 512ピクセル

で、大事なのは App Store 申請用を作成するということです。これは App Store で表示するものなんですが、実機で表示されるものと同じでなくてはいけません。全く同じではなくとも、見た目に大きく変わってしまうと問題です。

続きを読む