Posts Tagged: design

工業デザインのサイト

Yanko DesignのRSSを登録して毎日楽しく眺めてる。
Webデザインとは直接関係ないけど、観てるだけでおもしろいし、
使う人の事を考えてるなとか、
その発想は無かったとか、
色んな発見がある所が面白い。

VideoViewとMediaController

最近更新頻度が落ちている。
一時期は「毎日更新しなきゃダメだよね。」とか言ってたのに。。。いかんいかん。

さて、本題だが、
今回はAndroidレイアウトの簡単なメモ。
VideoViewとそれを制御するMediaControllerについて。

とくに何も考えずにVideoViewを使うとMediaControllerが画面の最下部に表示されてしまう。

VideoViewの高さを指定したり、MediaControllerのマージンを設定したり、いろいろ試したが、
結局VideoViewとMediaControllerの間に出来る隙間は一体なんなのか解らずじまい。

もうMediaControllerは表示できる一番下に表示されるものだ、と割り切って、
VideoViewとMediaControllerをLinearLayoutで囲む事にした。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:id="@+id/linear_layout"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

	    <TextView
	        android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:text="@string/hello" />

	    <VideoView 
	        android:id="@+id/video_view"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content" />

	    <MediaController 
	        android:id="@+id/controller"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:visibility="visible" />

    </LinearLayout>

	<Button 
	android:id="@+id/setting"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:text="@string/setting_btn" />

</RelativeLayout>

上手くいった。

ページ遷移の概念が変わった

webデザインを紹介するサイトなんかを見ていると最近、
http://www.vml.com/
とか
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide
とか
jQueryでスマフォ版Facebookライクなメニュー表現を実現する「PageSlide」
と行った様な主にタッチスクリーンデバイスで良く実装されているUIを見かける様になりました。

今までになかったインタフェースにインスパイアされたUIがPC向けのコンテンツでも実装される様になって来たという事だと思います。
それはデバイスの垣根が低くなって来たという事かもしれません。
いや、というよりデバイスの垣根をどうにかして低くしようとした結果このようなUIになっている様に思います。

そもそもデバイス(ディスプレイサイズ)の多様化が進んでいる昨今、単独のデバイスのディスプレイサイズを想定していは多くの人にコンテンツを届ける事が出来ません。
そういった状況の中では画面遷移に対する考え方を変えざるを得なかったのだと思います。

確かに一昔前でも何種類かのディスプレイサイズはあったでしょうが、まだそれぞれに対応したデザインを個別に作る事が可能な範囲だったのでは無いかと思います。
その時はディスプレイサイズという決まった「枠」にキッチリはまる様にデザインしていたと思います。
この決まった「枠」にはまる様に、それぞれ画面A、画面B、画面C…と作成して、
ページ遷移は画面Aを表示して次に画面Bを表示して画面Cを…と、それぞれの画面がぱらぱら漫画の様に繋がっていたイメージです。

しかし、今日ではスマートフォン(特にAndroid)の登場によって一気に種類があふれてしまいました。
「枠」の種類が増え、それぞれにきっちりはまるものを用意することが大変な作業になってしまいました。
そう言った状況では”ページをスライドさせる”というアニメーションがとても効果的に働くと思います。
画面A、画面B、画面C…と別々だったものの境目が曖昧になり一枚絵の様なイメージになったと思います。
そして今まで「枠」と見なされて来たものは、その一枚絵の一部を切り取る「窓」のような存在に変わったのだと思います。

これからは「枠」におさまらないデザインを可能にするUIを意識する必要があります。
そうすれば、これからのディスプレイという「窓」からは何かとてもワクワクする世界が見える様になるはずです。

最近毎日見るwebサイト

最近、Awwwardsというwebサイトを毎朝見るの日課になってます。

英語なので正確な趣旨は解ってませんが、毎日世界中のwebサイトの中から有識者が採点し優秀だと認められたwebサイトが紹介されているようです。

毎回上げられるwebサイトは非常に質が高く観ていて飽きません。
普段日本語以外のwebサイトを見る機会というのはあまり無いので、世界中の良質なwebサイトが纏まっているのが非常に助かります。
また、自分は英語はあまり得意ではないため、日本語以外のwebサイトは一目見た時に文字による直感的な情報が入って来にくいのでデザインそのものの印象を強く感じる事ができる気がします。
良いwebサイトは文字があまり読めなくても何についてのwebサイトなのか解りやすいと感じました。
そういった直感的に情報を伝えられるデザインというものを意識していきたいですね。

タッチされた時の画像を変える

画像をボタンとして使用する時、タッチされたらへこんだ様な画像に差し替える事で、
押した感を表現したい。

用意するのは画像2枚(通常時、押された時)とxmlファイルだけで対応できる。
はじめてxmlファイルをボタンとして定義できると知ったときは不思議な感じだった。ちょっと感動した笑

通常時画像:normal.png
押された時画像:pressed.png
ボタン定義xml:botton.xml
を全部res/drawableに入れておけば良い。

botton.xmlの例はこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:drawable="@+drawable/pussed">
    </item>
    <item
        android:drawable="@+drawable/normal">
    </item>

</selector>

iPadカバー一新

半年ぶりくらいにiPad(初代)のカバーを買い替えた。
今まで使っていたのはこちらSwithEasy NUDEというカバー↓
SwithEasy NUDE
こういったタイプのカバーは見た目ばっかりでiPadの側面が露出してしまうものが多い。
しかし、このシリーズはカバーとして非常に優秀で、イヤホンジャックやDockコネクタまで完璧にカバー。
その点に惚れ込んで今回もSwitchEasyのカバーを購入することに。
実店舗に行くとすでにiPad2のカバーばかりしか置いてないっぽい。
実物を見ないで購入するのは正直不安だったがSwitchEasyならば、と。

SwitchEasy CARA
フィルムやスタンド、クリーナーなどのサプライも充実している。

表はプラスチック製。
iPad本体を包む部分はラバー製でこの製品も完璧なカバー率(笑)で安心。


カバーの稼働部は切れ込みが入っていて表のカバーが裏面にぴったり引っ付くまで開ける様になっている。
ラバー部分は結構厚いので丈夫そう。

6角形の凹凸がならぶ表面は写真で見るとちょっとゴテゴテしすぎているようでどうかなーと思ったが、実物はそんなに凹凸がある訳ではなく、いい具合につるっとした光を反射させて結構キレイでかっこいい。
大変満足な一品だ。
ただ、ラバーが厚いせいか少し重いな…。