Android N Preview3を普段使いしてみる

フェノメナエンターテインメントの「おっちゃん」です。

私は、普段使いのスマホとしてNEXUS5Xを使用しています。
購入時は、Android6.0 Marshmallowがインストールされていましたが、Google I/O 2016で公開されたAndroid N Preview3をインストールしてみました。

AndroidN

今回は、Android N Preview3で良くなった点と、悪くなった点を書きたいと思います。

続きを読む

ユーザーアイコンのデザインを検証

こんにちは、デザイン担当のオガワです。

スマホアプリの画面デザインをしていると、毎日色々なアイコンを作成します。UIデザインにおいてアイコンデザインって、とっても大事ですよね。

今日は、私が個人的にこだわりのある「ユーザーアイコン」について書いていこうと思います。 ここで言うユーザーアイコンとは、サービスのアカウント写真を未設定時にしているときに表示される人型のイラストのことです。

画面デザインをしたことある方なら、一度はユーザーアイコンを作成したことがあると思います。ユーザーアイコンは各アプリごとに個性の出るアイコンデザインですよね。そして、そのアイコンのクオリティでデザイナーの力量を測れるとも思っております…!

続きを読む

画像の配置 その2

こんにちは。すーさんです。

前回に引き続き、画像の配置についてまとめておきたいと思います。
前回は余白の削除でしたが、今回は位置の調整について記載します。
※参考図は位置が分かりやすいようにdivに枠線をつけています。

続きを読む

そのアプリ大丈夫ですか?

フェノメナエンターテインメントの「おっちゃん」です。

突然ですが、Androidスマートフォンをお使いの「あなた!」 、端末に入っているアプリケーションは大丈夫ですか?
「なんこっちゃ」と思われたかもしれませんが、今回はアプリケーションが特別な機能を使用する時の許諾についてのお話です。

続きを読む

異なる解像度を持つiPhone端末への対応

こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。

iPhone 6とiPhone 6 Plusが発売されたことにより、iPhoneアプリの世界にもバリアブル化の波が押し寄せてから1年半が経とうとしています。
iOSでは異なる解像度を持つデバイス間でも、同じ要素は同じ物理サイズで表示されるように設計されていて(注1)、例えばiPhone 5で1cmの大きさで表示されているものは、画面が大きくなったiPhone 6 / 6 Plusでも1cmで表示されます。配置する要素のサイズは同じですが、配置するフィールドの大きさは異なっているので、1画面の中に表示出来る要素の数が変化しているということでもあります。

iPhone 5でも画面サイズの変更が発生していましたが、縦方向のみだったため、アプリの性格によってはそれほど大きな影響を受けずに済んでいた場合もありました。しかし、iPhone 6 / 6 Plusでは横方向の解像度も拡張されたため、これまでは影響が少なかったアプリでも新たに調整が必要となるケースが多々起きています。

タイトル画像

続きを読む

人工知能でデザイナーは必要なくなる?

こんにちは、デザイン担当のオガワです。

先日、人工知能開発・研究を専門にされている三宅陽一郎さんのお話を聞く機会がありました。現在はスクウェア・エニックスでゲームAIの開発をされています。私は技術的なことを聞いてもチンプンカンプンだったですが…質疑応答の中で気になったお話がありました。

pe

ある方が「人工知能の発達で○○という職業はなくなりますか?」と聞かれたのです(○○の中には特定の業種が入っていたのですが何が入っても同じです)。確かに、世間では人工知能が発達することで、この職業が無くなる!とか、人間は必要なくなる!的なことが話題になっていますよね。
私はそうなったら大変だな~と、ボンヤリとしか考えてなかったのですが、たしかに今の仕事が人工知能に取られてしまったら…私は他に何もできることがありません(笑…えない)

でも、その質問に三宅さんはこう答えていました。

続きを読む

画像の配置

こんにちは。すーさんです。

HTMLで画像やテキストをレイアウトする時に、よく使うパターンなのに忘れてしまって毎回調べていることについて、備忘録を兼ねてまとめておきます。
今回は画像を配置したときにできる謎の隙間についてです。

○画像を並べたときにできる余白をなくす

数枚の画像を連続して並べたときに、意図しない余白ができることがあります。

HTML:
    <body>
        <img src=”img/rect1.png” alt=”rect1″>
        <img src=”img/rect2.png” alt=”rect2″>
        <br>
        <img src=”img/rect2.png” alt=”rect2″>
        <img src=”img/rect1.png” alt=”rect1″>
    </body>

fig1

 

 

 

 

 

 

 

これを以下のように変更します。
CSS:
div {
    line-height: 0;
}

HTML:
    <body>
        <div>
            <img src=”img/rect1.png” alt=”rect1″><img src=”img/rect2.png” alt=”rect2″><br>
            <img src=”img/rect2.png” alt=”rect2″><img src=”img/rect1.png” alt=”rect1″>
        </div>
    </body>
 

こうすると、余白なく連続して画像を配置することができます。

fig2

 

 

 

 

 

 

 

 ○divで囲んだ画像の余白をなくす
 divタグで画像を囲むことはよくあるのですが、その場合にも何もしないと画像の下に余白ができます。(分かりやすいように、背景色を設定しています)

HTML:
    <div>
        <img src=”img/rect3.png” alt=”rect3″>
    </div>

fig3

 

 

 

 

この場合は、下記のようにCSSで指定すると余白を消すことができます。
CSS:
img{
    display: block;
}

fig4

 

 

 

 

まだあるのですが、今回はここまでにします。

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社