mbd-cover
Releases

真ん中バースデーWebサイトリニューアルしました!

こんにちは!新人森田です。
街で新入生や新社会人な方々を見かけたり、新年度や新学期が始まったりと、新しいことづくめの季節になりましたね。 この空気だけで結構ワクワクしちゃうから春って好きです。
ではフレッシュな感じに今回もはりきって告知します!

なんと! 真ん中バースデーのWebサイトをリニューアルしましたー!

http://www.mannaka-birthday.com/

どのへんが変わったのかというと、

1、ロゴ周辺をリデザイン

0410-1

以前はロゴの下にキャッチフレーズやデモ画面の紹介等を置いていたんですが、ちょっと散漫な印象が。。
あとは、新機能の実装するためのスペース確保をするために周辺要素をひとまとめにしてみました。

まずロゴとデモ機を合わせました。 App Storeのボタンもこのどこかに配置するとのことだったので、リボンをあしらって目立たせ&まとまり感を演出。左側に空いたスペースには無料ダウンロードのメッセージを入れようと試行錯誤していたら、バッジ形式がよさげでした。フォントに他とは違うやわらかい明朝体を使って、ペタッと貼ったようなちょっと変わった質感を出しました。明朝体は単なる思いつきだったけど気に入ってます。 色はリボンと合わせて全体のトーンを整えつつ、これならキャッチコピーは上かな!という流れで完成!

情報が一カ所にまとまったことで、見てほしいポイントが絞られる効果もあったんじゃないでしょうか。
で、この下に空いたスペースに何を置いたのかというと。

2、おためし計算機能実装

0410-2

はいっ!こちらです!

web上で真ん中バースデーをおためし体験できます

名前は入れなくても調べられるので、是非使ってみて下さいね。
ただし、おためしは1日1回までなんですすいません。
もっと調べてみたい時はApp storeからアプリをダウンロードしていただけると嬉しいです!

真ん中バースデー on the App store

単に説明だけだったWebページでしたが、内容が充実してきました。
前に見ていただいた方もよろしければ是非おためししていってみてください。

http://www.mannaka-birthday.com/

次回アップデート予告!

ただいまハレノヒでは現在進行形で真ん中バースデーアプリのアップデート作業を遂行中です。
プログラムの方は師匠がすでにバッチリ作り上げてくださっております。
私の方の素材準備が間に合うかどうかのギリギリなところですが、間に合わせてみせる…!

iPhoneだけどFacebookアカウント持っていなくて真ん中バースデーを調べられなかったという方!
お待たせしました!

次のアップデートでは、Facebookアカウントなしでもアカウント作成出来るように仕様変更いたします。

今までだいぶユーザーが限られてしまって申し訳なかったのですが、これでもう少し広げられるんじゃないかと思います。
また、Facebookアカウントなしでアカウント作成した場合は友だちが0人の状態からのスタートとなります。 そうなっても寂しくないように、もう1つのアップデートをご用意しておりますのでどうぞお楽しみに!!

今回リニューアルした真ん中バースデーwebサイトでおためししたい方は、
http://www.mannaka-birthday.com/

真ん中バースデーアプリをダウンロードしたい方は、
真ん中バースデー on the App store

どうぞよろしくお願いします!!

標準
title-feature
Design

スタイリッシュ!デザインの参考になるNYのホテルのWebサイト特集

こんにちは!新人森田です。
今日こそは暖かいんじゃないかと思って外に出ると期待を裏切られる毎日です。
むしろ雪が降りました。
最近くしゃみがよく出ますがこれはまだ花粉症ではないと信じてます。

今回はいつもと趣向を変えて、デザインの参考になるWebサイトを特集してみます。
暖かくなったら重いコートを脱いで、お出かけもはかどりますね。
お花見やいちご狩りと日本にも素敵スポットは沢山ありますが、せっかくならNY行っちゃう?!

というわけで特集内容はこちら!
(NY旅行にも役立つかもしれない)デザインの参考になるNYのホテルのWebサイト特集

ではいってみましょう。

堂々たる高級感!

ホテルから連想されるワードとして挙げられるもののひとつに「高級感」があります。
歴史ある一流ホテルにはそれにふさわしい雰囲気作りが必要です。

THE HIGHLINE HOTEL

hotel-1

http://www.thehighlinehotel.com/

これぞ正統派といえそうな佇まいです。
余計な装飾などは加えず、ナビゲーションはモノトーン。
丁寧に撮られた写真と、饒舌すぎないコンパクトにまとめられた情報から上質さを感じます。

THE NOMAD HOTEL

hotel-2

http://www.thenomadhotel.com/

こちらはまずページの黒枠に目がいきます。
フィルム写真を見ているかのような感覚がします。
コンテンツそれぞれにフルサイズの画像が使われているので、その世界観に引き込まれてしまいます。
また、米仏伊独日の言語にローカライズされていてるのも嬉しい。

フォント選びが素敵!

「高級感」といえばかっちりとしたセリフフォントを想像しがちですが、それだけではスタイリッシュとはいえません。
上品かつオシャレに演出されたサイトを見たら旅行したい衝動が一層強まります。

WYTHE HOTEL

hotel-3

http://wythehotel.com/

今回紹介した中で唯一きちんとレスポンシブしていたサイトでした。
トップページを見るとカジュアルめな印象を受けますが、本文にはセリフ体が使われていてあくまで見出しの役割のようです。
メリハリがあって好きなテイストです。
提携している(?)レストランのページもオシャレ。

THOMPSON HOTELS

hotel-4

http://www.thompsonhotels.com/

左上に予約ボックスが固定されていながらも、ページ全面を使ったレイアウトにはスタイリッシュとしか言いようがありません。
予約ボックスの横のナビゲーションが実はパンくずみたいな機能も果たしていてシビれました。
各要素のポジションが%で定義されていたので、ある程度の画面サイズの変化には耐えられそうでした。

REFINERY Hotel

hotel-5

http://www.refineryhotelnewyork.com/

今までのサイトとは違って、ギャラリーサイトみたいな、雑誌を読んでいるみたいなレイアウトです。
黒背景に写真の色が際立っています。
全体の雰囲気に合わせた手書き風フォントがかっこよかったり、でもどこか親しみやすい感じがしたり。

リゾート感あふれてる!

異国への旅はまるで非現実の世界に来たかのようです。
あふれるリゾート感もまた、もうここ行くしかないわって思っちゃう理由のひとつです。

THE Jade Hotel

hotel-6

http://www.thejadenyc.com/

indexページと各コンテンツページの見せ方に差があって分かりやすいです。
随所に使われている花モチーフのパターンが全体の雰囲気を引き立たせてくれています。
差し色が赤だったりと色使いが絶妙。

THE JAMES HOTELS

hotel-7

http://www.jameshotels.com/

見るからに開放感あふれちゃってます。
こういう広々のびのびとした空間の使い方は海外ならではな感じ。
NYのホテルっていうテーマなのにマイアミのビーチに目がいきまくってしまいます。
これはあれですね、旅行業界におけるシズルというか。今すぐ旅立ちたい!

まとめ

いかがだったでしょうか。
コンパクトかつ使いやすいナビゲーション・迷わないUI設計・フルスクリーンでスライドする写真などなどスタイリッシュさ満載で、さすがWeb先進国という感じでした。
何よりやっぱり毎回思うけど海外の写真とか英語はずるいです。
でも日本にも日本の良さがあって、日本という文化圏に合わせた、使いやすくスてタイリッシュなWebサイトってきっとあるはず。
今回紹介したようなWebサイトに刺激とエッセンスを貰いつつ、どうやったらそれが実現出来るのかを日々模索します。押忍!

標準
blog-0221b
Design

ブログをプチリニューアルしました

こんにちは!新人森田です。
今日はアプリ博2014を見学してまいりました。
ユーザーでいるだけでは気付かないようなアプリの裏側を垣間見ることが出来たり、
名刺交換させていただいたりととても良い刺激になりました。

マーケットに山ほどあるアプリの中から選んでもらえるものを作れるように
デザインももちろんですが技術の理解も深めていきたいと思いました。

ブログプチリニューアル

さて、ハレノヒブログのリニューアルから早くも約1ヶ月が経ちました。
実装された時は嬉しいだけだったんですが、自分たちで実際に使ってみると改善点がちらほら。
修正箇所を挙げてどう進めていこうか相談していたところ、ちまちま直していくよりは思い切って作り直そうという結論になりました。

早速デザインの見直しをして、昨日プチリニューアルしました!

今回は、様々な制作会社のブログを観察しながら制作を進めました。
その作業の中で気付いた点をいくつかまとめたいと思います。

他ブログとの比較をして気付いたこと

デザインルールを意識する

リニューアルするにあたって、「デザインルール」をもう少し意識してみました。

ハレノヒブログの場合はヘッダーを水色・背景をうすいグレー・コンテンツは白地に黒文字としています。
そのルールに従って、各サブカテゴリのタイトル部を水色の帯にしたらメリハリがつきました。

また、今まで白だったフッターを濃いめのグレーにしてフッターとしての存在感を出してみました。
さらにそれに従って、記事の下のページングを同色にして同類っぽさを出してます。
濃いめのグレーに黒文字だと印象が重すぎる気がして、文字をグレーにしたところもちょっとしたポイントです。

ゆったりとしたマージン

ブログといえば情報量が多いし、いかにコンパクトに詰め込むかと考えていたのがそもそも間違いでした。
情報量が多いからこそ1つ1つの要素に広めの幅を取ることで、どこを見るべきかが分かりやすくなるんだと思います。
今までほとんど5pxだったmarginやpaddingを部分的に15px〜30pxくらいにしてみたら、窮屈感がなくなって広々と見やすくなりました。

フッターエリアが広い

フッターといえば会社のロゴやリンクやコピーライトを表示するだけの簡潔であまり幅を取らないエリア、というのが今までの認識でした。
でも改めてフッターに注目してみると、工夫する余地は十分あるんだと気付かされました。

今回フッターエリアを縦に3分割して使ってみることに。
会社情報がちょっと豊かになって、名前の文字列だけじゃないものも伝わるような気がします。

ソーシャルボタンの設置位置

これは一覧ではなく記事のページについてです。
前はツイートボタンなどは記事の頭の部分に設置していたんですが、これも良くありませんでした。他のブログでなぜソーシャルボタンを記事の上下に2カ所設置しているのかを改めて考えると、

上部:その記事の人気指数を表して、読みたくさせる
下部:記事を読み終えた後にボタンを押す、という流れをつくる

ということなんじゃないかと思います。

なのでソーシャルボタンを記事の上下に設置してみました。(押していただけるとやる気倍増します)

まとめ

結論からいえばブログはあくまでブログなので、パーツの寄せ集めなんですよね。
個性を出す部分はある程度決まっていたり。

でも色々見ながら作り直してみることで、思い込みで作っていたことに気付かされたりもしました。

まだまだ改良点はありますが、プチリニューアルしたハレノヒブログをよろしくお願いします!

標準
loading
Development

TitaniumでiOSのNavBarにローディング中を示す表示をしてみる 後編

前回はWindowのタイトルエリアに複数のLabelを追加して中央位置に方法をご紹介しました。今回はこれを応用してグルグルと回りいかにもローディング中ですよ!という感じの見た目にしてみたいと思います。

ImageViewでGIFアニメは動かない

Webの技術を応用してネイティブアプリ開発が出来るTitaniumですがImageViewにGIFアニメを表示させてみても動かないのです。

ではどうするか。ImageViewには画像のパスやバイナリを入れる image というプロパティの他に images というものも用意されてます。

Array of images to animate, defined using local filesystem paths, File objects, remote URLs (Android only), or Blob objects containing image data.Blob and File objects are not supported on Mobile Web.

ドキュメントでは上記のように説明されていて、画像パスの文字列か、画像のバイナリデータか、Fileオブジェクトのインスタンス、いずれかのデータを配列に格納したパラメータを設定できます。
この配列にアニメのコマごとの画像を渡すことでアニメーションを実現できる仕組みです。若干めんどくさいですね。

ローディング画像を用意する

ではローディング画像を用意しましょう。Ajaxload – Ajax loading gif generator というサイトで手軽にいわゆる”ぐるぐる”が生成できるのでこれを利用します。

スクリーンショット 2014-02-10 11.24.51

 

ダウンロードしたGIFをphotoshopで開くとコマごとにレイヤーに分割されて読み込まれました。全部で12個のレイヤーがあります。

スクリーンショット 2014-02-10 11.26.28

 

ちょっとめんどくさいんですが、レイヤーごとにWeb用に保存でpngに書き出しました。もしかしたら全レイヤーを別々に書きだす方法もあるかもしれませんが見つけられませんでした。

スクリーンショット 2014-02-10 11.28.42

 

ちなみにフォルダに入れてファイル名にコマの番号を振っておくと扱いやすいかと思います。

素材ができたのでImageViewに設定してみます。ControllerでImageViewを生成してimagesに複数画像を設定します。材画像は66×66サイズだったのでRetinaを考慮して33×33にしておきます。

var spinner = Ti.UI.createImageView({
 images: [
 '/images/spinner/1.png',
 '/images/spinner/2.png',
 '/images/spinner/3.png',
 '/images/spinner/4.png',
 '/images/spinner/5.png',
 '/images/spinner/6.png',
 '/images/spinner/7.png',
 '/images/spinner/8.png',
 '/images/spinner/9.png',
 '/images/spinner/10.png',
 '/images/spinner/11.png',
 '/images/spinner/12.png'
 ],
 width: 33,
 height: 33
 });

前回で紹介した通りコンテナとなるViewを生成して格納しておきます。

var titleContainer = Ti.UI.createView({
 width: Ti.UI.SIZE,
 height: Ti.UI.SIZE,
 layout: 'horizontal'
 });
titleContainer.add(spinner);
 $.mainWindow.titleControl = titleContainer;

ここでビルドしてみるとわかるのですが、画像は表示されません。

スクリーンショット 2014-02-10 11.40.46

 

これは画像は複数セットされているがアニメーションがスタートしていないためです。なので以下のようにstartメソッドを実行するようにしてビルドすれば画像が表示されます。

spinner.start();

スクリーンショット 2014-02-10 11.43.27

 

画像とNavBarの背景色があっていないのでちょっと変ですが、大目に見てください。style設定でNavigationWindowのbackgroundColorを#fffにすれば馴染むと思います。

Labelも一緒に入れてみる

これだけだとちょっと物足りないのでNow Loading…というLabelも並べてみます。

var title = Ti.UI.createLabel({
 text: 'Now Loading...'
 });
titleContainer.add(title);

するとこうなります。

スクリーンショット 2014-02-10 11.47.38

 

画像と文字がくっついてしまっていて見栄えが悪いので、Labelのleftプロパティに10を設定して再ビルドしてみると以下のようになりました。

スクリーンショット 2014-02-10 11.49.00

 

いい感じです。

まとめ

Titanium Mobileでの開発にはiOS SDKを直接あつかう本来の開発に比べると不自由な部分があるのは否めません。しかし今回ぐらいのカスタマイズが出来るのであれば割りと一般的なUIの構築には困らないのではないかと思います。まだまだ応用の効くAPIもあるかもしてないのでこれからも発見次第お伝えしていきたいと思います。

標準
loading
Development

TitaniumでiOSのNavBarにローディング中を示す表示をしてみる 前編

今回はTitaniumでiOS開発をしていて見つけたテクニックを紹介します。慣れている人なら当たり前のことかもしれませんが僕は自分でこのテクニックを見つけてTitaniumのコツを掴んだような気がしました。

NavBarとは

Windowの上部に表示されるエリアでiOSではウィンドウのタイトルや、画面遷移するボタンを左右に表示させるためのものです。

これは Ti.UI.NavigationWindow や TabGroup を親に持つWindowで表示されます。なので親の存在しないWindowオブジェクトに対していくらtitle要素やbarColorを設定しても全く表示されないので注意が必要です。

<Alloy>
  <NavigationWindow platform=”ios”>
<Window title=”test”>
</Window>
</NavigationWindow>
</Alloy>

=>この場合はNavBarが表示されてタイトルにtestが入る

スクリーンショット 2014-02-08 15.52.26

<Alloy>
<Window title=”test”>
</Window>
</Alloy>

=> NavBarエリアは表示されない

スクリーンショット 2014-02-08 15.53.23

 

NavBarのタイトルエリアのAPI

タイトルエリアには通常、Windowのtitleプロパティにセットされた文字列が表示されます。これを独自のUIを変えるためにはWindowのtitleControlというプロパティを利用します。

Titanium 3.Xドキュメントには以下のように書いてあります。(2014年2月8日現在)

titleControl : Titanium.UI.View
View to show in the title area of the nav bar.

つまりWindow.titleControlには Ti.UI.View そのものか Ti.UI.View を継承しているオブジェクトがセットできるということです。

ただしこれは1つまでという制限があります。例えばLabelはTi.UI.Viewを継承しているオブジェクトなのでtitleControlにセットできますが、2つ連続でセットしても後勝ちになってしまい、この方法では複数のLabelは表示できません。

views/index.xml

<Alloy>
<NavigationWindow id=”navigationWindow”>
<Window id=”mainWIndow”>
</WIndow>
</NavigationWindow>
</Alloy>

controllers/index.js

$.navigationWindow.open();
$.mainWindow.titleControl = Ti.UI.createLabel({ text: ‘hoge’ });
$.mainWindow.titleControl = Ti.UI.createLabel({ text: ‘fuga’ });

=> これではタイトルエリアに fuga が表示される(厳密にはhogeが一瞬表示された後にfugaに置き換わる挙動をする)

スクリーンショット 2014-02-08 16.09.06

 

Ti.UI.Viewでラップすれば複数表示できる

そうなんです。Viewオブジェクトは子供を持てる仕様なのです。ですから複数の要素を表示させたい場合はプレーンなViewをコンテナーとして扱い子供に複数のオブジェクトを配置すればいいんですね。

var titleContainer = Ti.UI.createView();
titleContainer.add(Ti.UI.createLabel({ text: ‘hoge’ }));
titleContainer.add(Ti.UI.createLabel({ text: ‘fuga’ }));
$.mainWindow.titleControl = titleContainer;

=> titleControlには1つのViewしかセットしていないので複数のLabelが表示される

スクリーンショット 2014-02-08 16.14.42

 

あ、でも重なってしまった…という場合は

layoutオプションで子供たちを重ならないように配置させる

こんな時のためにlayoutオプションという便利なものがTianiumには用意されているんですね。

使いかたは並ばせたい複数の要素を内包している親要素に対して指定します。今回は横に重ならないように並ばせたいので layout: ‘horizontal’ を使いました。

var titleContainer = Ti.UI.createView({ layout: ‘horizontal’ });

=> 子どもたちは重ならずに整列

スクリーンショット 2014-02-08 16.21.21

 

あれ…でも今度は変な位置になってしまいましたね。

Ti.UI.SIZEで中身の要素のサイズに合わせる

なぜ左上にLabelが移動してしまったのか、それはコンテナビューのエリアが割りと広めに確保されているかなんですね。
背景色をつけてみるとわかりやすいです。

スクリーンショット 2014-02-08 16.24.19

 

この状態で「横に並んで!」と言ったら左上に来てしまうのも無理は無いかと。

またこんな時のためにTitaniumには便利なAPIが用意してあって、コンテナ要素のwidthとheightにTi.UI.SIZEというものをセットしておくと、子供の要素の大きさに合わせて自身のサイズを設定してくれるんですね。

var titleContainer = Ti.UI.createView({
layout: ‘horizontal’,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
});

=> 子供のサイズが親に反映される

スクリーンショット 2014-02-08 16.28.22

 

いい感じです。

次回につづく

なんか一つ一つ順を追って紹介していたら長くなってしまったのでこの続きは後編にしたいと思います。

次は今回の配置テクニックを活かしてローディング感のある見た目にしてみたいと思います。

標準