フェンリル

Developer's Blog

iPhone デザイン アーカイブ

アプリのUIデザインと建築的な設計思想

こんにちは。デザイン部の外薗です。

私は学生時代は建築を専攻していたこともあり、東京都近代美術館で開催されている「日本の家 1945年以降の建築と暮らし」を観に行ってきました。

日本の伝統・歴史をふまえながら、暮らし・住まいのあり方を考え、日本の建築がどのように変化してきたかを捉える展示会でした。

丹下健三、清家清、黒川紀章を始め、難波和彦等、日本の名だたる建築家の初期の作品も紹介されており、「日本の家」をテーマに建築の大きな流れを感じ取れる内容となっていました。

クライアントと建築家が双方に意見を出し合い、日本の住宅が進化してきた経緯をみていくと、ふと、現在担当しているアプリ開発と重なるものを感じました。

重なる点とはどのようなものでしょうか?
私なりに建築とアプリ開発の類似点を考察してみました。

続きを読む

大阪でモバイル関連の勉強会「Mobile Act OSAKA」を開催します

こんにちは、エンジニアの宇佐見です。

大阪で「Mobile Act OSAKA」を開催します。Mobile Act OSAKA は、フェンリル大阪が開催するモバイルアプリ開発関連の情報共有や参加者同士の交流を目的とした勉強会です!

続きを読む

【pt/%/px】指定する単位による見えかたの違い比較【iOS】

単位による実寸サイズでの見え方の違い比較 [pt/%/px]
 

今年入社しましたデザイナーの きの です

調べ物が好きです。
最近は、iOS向けのデザインを作るにあたり、pt や px・% による指定の違いをまとめていました。

結論としてはこうなります。

  • 端末に関係なく同じ見かけの大きさにしたい > pt
  • 見かけのサイズにあわせて大きさを変えたい > %

まとめた図は以下からご覧ください。

続きを読む

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サイズでつくる。
  • 最後は目で見て微調整。

続きを読む