読者です 読者をやめる 読者になる 読者になる

inFablic

Fablic開発者ブログ

Before UI Design - 定性と定量の間で考える

こんにちは、Fablicでデザイナー兼プロダクトマネージャーをしている @takejune です。最近は筋トレに励んでいます。

先日、弊社で運営しているフリル(FRIL)がGoogle PLAYの2016年ベストアプリに選ばれ、ベストデザイン賞を獲得しました🎉

Material Designに対応し、Androidユーザーにとっての使いやすさを考えてきたことが受賞に繋がったと思っています。

f:id:infablic:20161205101928p:plain

このように、近年ではプラットフォーマーのデザインガイドラインが充実し、ユーザーにとって易しいUIをつくることが容易になってきました。 また、プロトタイピングの一般化によって試行錯誤のサイクルを回すことも容易になりました。 そのため、いわゆるUIデザインに掛かる時間が短くなっているように思います。

そんな中で、Fablicのデザインプロセスがどのように変化しているのかをお伝えします。

続きを読む

Drekkarを使ってAndroid WebViewのJavascriptブリッジ処理をEvent Bus風に書く

Android

こんにちはFablic エンジニアの@cutmailです。

この記事は、Fablic Advent Calendar 2016 1日目のエントリーです。

2016年もあと1か月で終わってしまいますが、いかがお過ごしでしょうか。

アプリ開発をする際に、一般的にUIを全てネイティブコードで作ることはユーザー体験的には良くなりそうですが、 どうしても一部をWebViewにしなければならないなどのケースってありますよね。

WebViewからHTMLやURLを指定して、そのHTML内で処理が完結すれば良いのですが、 Android JavaとHTML内のJavascriptで相互に呼び出しを行いたいみたいなケースもあると思います。

弊社のアプリフリルでも一部の画面をWebViewを使って作っていたりします。

AndroidのWebViewクラスではaddJavascriptInterfaceメソッドを使うことで、任意のJavascriptのインターフェースを定義できます。

そして実際に、JavaからJavascriptのメソッドを呼ぶ、JavascriptからJavaのメソッドを呼ぶ処理はこういう感じで書くことができます。

JavaからJavascriptのメソッドを呼ぶ

Java

webView.loadUrl("javascript:showMessage('call From Java');");

Javascript

function showMessage() {
    $('body').append('<p>Received From Java</p>');
}

JavascriptからJavaのメソッドを呼ぶ

Java

public class JavascriptInterfaceActivity extends AppCompatActivity {

    private WebView webView;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_javascript_interface);

        webView = (WebView) findViewById(R.id.webview);
        webView.loadUrl("file:///android_res/raw/javascript_interface.html");
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new JSInterface(this), "droid");
    }

    final class JSInterface {
        private final Context context;

        JSInterface(Context context) {
            this.context = context;
        }

        @JavascriptInterface
        public void showToast(final String message) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

Javascript

droid.showToast('call from Javascript');

これでJavaとJavascriptで相互にメソッド呼び出しをすることができますが、 ぱっと見た感じわかりやすいとは言い難い部分がありそうです。

そこでDrekkarというライブラリをご紹介します。

Drekkar

https://github.com/coshx/drekkar

DrekkarはJavaとJavascriptの間でEvent Bus形式で相互に呼び出しをすることができるライブラリです。

実際にJavascriptInterfaceを使っていた部分をDrekkarを使って書き換えてみます。

JavaからJavascriptのメソッドを呼ぶ

Java

webView = (WebView) findViewById(R.id.webview);
webView.loadUrl("file:///android_res/raw/drekkar.html");
webView.getSettings().setJavaScriptEnabled(true);

Drekkar.getDefault(this, webView, new WhenReady() {
  @Override
  public void run(EventBus eventBus) {
    eventBus.post("showMessage");
  }
});

Javascript

Drekkar.getDefault().register("showMessage", function(name) {
    $('body').append('<p>Received From Java</p>');
});

JavascriptからJavaのメソッドを呼ぶ

Java

webView = (WebView) findViewById(R.id.webview);
webView.loadUrl("file:///android_res/raw/drekkar.html");
webView.getSettings().setJavaScriptEnabled(true);

Drekkar.getDefault(this, webView, new WhenReady() {
  @Override
  public void run(EventBus eventBus) {
    eventBus.register("showToast", new Callback() {
      @Override
      public void run(String name, final Object data) {
        runOnUiThread(new Runnable() {
          @Override
          public void run() {
            Toast.makeText(getApplicationContext(), data.toString(), Toast.LENGTH_SHORT).show();
          }
        });
      }
    });
  }
});

Javascript

Drekkar.getDefault().post('showToast', 'Call From Javascript');

ほかにもDrekkarではListの値をそのまま渡すこともできたりします。

Drekkar.getDefault(this, webView, new WhenReady() {
  @Override
  public void run(EventBus bus) {
    List<Integer> list = new ArrayList<>();
    list.add(1);
    list.add(2);
    list.add(3);

    bus.post("List", list);
  }
});

JavascriptでListを受け取る例

Drekkar.getDefault().register("List", function(name, data) {
    if (JSON.stringify(data) == JSON.stringify([1, 2, 3])) {
        alert("ok");
    }
});

その他にもBool, Int, Float, Double, String, Arrayなどの型もサポートしているようです。 気になる方はサンプルコードが公開されているのでこちらをご覧ください。 https://github.com/coshx/drekkar/blob/master/app/src/main/java/com/coshx/drekkartest/EventDataActivity.java

まとめ

  • Drekkarを使うとJavaとJavascriptのブリッジ処理をEvent Busっぽく書けてJavascript Interfaceをうまく隠蔽できる
  • Javascript Interfaceと違い様々な型の値を受け渡しすることができる
  • Javascript Intefaceの冗長なコードを書く必要がなくなる

今回使ったサンプルコード

https://github.com/cutmail/DrekkarExample

フリルのロゴができるまで

f:id:wariemon:20161026091235p:plain

こんにちは。Fablicのデザイナーのわりえもん (@wariemon) です。
 
2016年10月に、フリル(FRIL)のロゴ・アプリアイコンのリニューアルをしました。
もうみなさんのお手元のアプリも新しいものに変わっているころかと思います。

 

今回、新しいフリルのロゴを作るに至ったきっかけから、新しいロゴになるまでの流れ・思いなどを、お話しさせていただきます。
 


なぜ変えたのか -きっかけと課題-

 

1. なんでも売れるフリマ へ  -きっかけ-

f:id:wariemon:20161026073623p:plain

まず、フリルはサービス開始から4年の間に、大きなロゴ・アプリアイコンのアップデートを3度行っています。
 
フリルは「女性限定フリマアプリ」としてスタートした際の、フリルをモチーフとした 1代目 フリルです。
 
2015年夏、性別に限らず誰でも使えるファッションフリマへと変わり、
1代目のシルエットを踏襲し、よりフラットな表現になった 2代目(通称 : こんぺいとうロゴ) になります。
 
そこから約半年、よりファッションを意識させる目的で、ファッションアイテムをちりばめたものに変え、これでアプリアイコンとしては 3代目 になります。
 
そして、今回「ファッションフリマ」から「なんでも売れるフリマ」へと、フリル自体の目指すところがかわる大きな転機が訪れました。
 
元に戻すのであれ、新しくするのであれ、フリルは変わる必要がありました。 

 

 

2. No Message, No Identity. -課題- 

 

まず新しいものを作る前に「変えないという選択肢」も考えました。
しかし、そこには「新しいものが必要だ」と実感させられる大きな課題が。
 
No Message, No Identity.
という2つの課題です。

f:id:wariemon:20161026073722p:plain

2代目 こんぺいとうロゴ は、ぱっと見の力強さがありました。しかし、これからのユーザーには何に見えるのでしょうか。
当時、1回目のリニューアルに際して、既存のユーザーを意識し、印象が大きく変わらないようにデザインを行った経緯があり、その役目を全うしていましたが、これからのユーザーにはメッセージ性がいささか乏しいのかもしれません。
No Message (伝わらない)という大きな課題を持っていました。
 
3代目 は、ファッションアプリであることは伝わるので、メッセージ性はありますが、特徴がありませんでした。
ちりばめられたアイテム自体はフリルを表すものではなく(また写真を使用しているため汎用性に乏しい)、
肝心のロゴタイプは特徴がなく、覚えるためのキーとしては、弱い存在であること。
これが、 No Identity (特徴がない)という課題です。
 
この2つの課題を解決し、フリルの認知を積み重ねていくためにも、これから数年は変える必要のない、強いアイデンティティが必要とされていました。
 
 
 
フリルのロゴができるまで
 
1. リサーチとイメージ
 
まず、競合サービスのもつ ビジョン と、その アウトプット についてリサーチをしていきます。
周囲を知ることで、自らの持つ独自価値や持つべきものに気づくことができるのと、表現としてのバッティングを防ぐことができます。
 
今回は、アウトプット(デザイン面)の話にフォーカスしてお話します。 

f:id:wariemon:20161026074336p:plain

(リサーチしたものの一部です)


リサーチをしてみると、フリマアプリや、ファッション系のサービスで多い表現は、
「ロゴのみ」「購入する商品(服・雑貨など)」「売買を想起するもの(箱 / 袋など)」
が多いことに気づきます。
 
そこで、「フリマ」自体を表現するモチーフを見つけることで、他とも差異の生まれる表現ができるのではないかと考えました。

f:id:wariemon:20161026074715p:plain

また、フリルがもたれるべきイメージについてもまとめてみました。
実際に図解したものと、このように表にしたものの2パターンを用意。
今回は、「A」より「B」といった比較の形で、まとめています。
こういった、感覚的なものも、視覚化することで自分以外のひとにも感覚を共有できるようになります。
「本当にこれでいいんだっけ?」となったときに立ち返る場所でもあります。
 
 
2. フリマ のモチーフとしての 「屋根」
 
モチーフの案だしは難航し、ガーランド(三角がいっぱいついた飾りのようなもの)くらいしか、わかりやすいものは出てきませんでした。
 
そこで、フリマや、ひとが集まる場所、ものが売り買いされているお店などを実際に観察して回りました。
そこでキーワードとして見つけたのが「屋根」でした。
「屋根」は、エリアを示す存在でもあり、目印でもあり、相手や商品への配慮でもあります。フリマではお店によりけりですが、会場においてひとつは目印となる屋根が存在していました。
 
フリルが持ち歩けるフリマなのだとしたら、「フリルは一番身近な"会場"である」といえるのではないかと考え、「屋根」が、ひと・ものが集まる場所を表すミニマムなモチーフになり得ると考えました。
 
そして、実際にそこからラフデザインをし、最終的に5案ほどをまとめ、デザインチームを中心に議論をしていきます。

f:id:wariemon:20161026080657p:plain

これはその中の2案、今回採用された「オーニング(屋根のさきのひらひら)」を基にしたA案と、Fと屋根をかけ合わせたB案。
 
最終的に、ショップなどお店も想起しやすいA案に対して、B案は不動産など別のものを想起するかもしれないということで、A案の方向性に決まりました。
 
ブラッシュアップしていく中で、この後で述べる「色」「ロゴタイプ」の他に、アプリアイコンにおける表現をこだわりました。 

f:id:infablic:20161026101912j:plain

アプリアイコンに単純にロゴを置いただけだと、のっぺりした見た目になってしまい、また屋根のシルエットを認識させるには、屋根の真ん中に色を入れるか、背景色を濃くする必要があります。
そこで、下方向にむけてシャドウを落とすことで、立体感が生まれ、屋根のシルエットを視認でき、屋根らしさがでるようにしました。
これにより、フラットなロゴ単体にはなかったある種の手触り感(クラフト感)が加えられたと感じています。
 
 
3. 色に意味を込める

f:id:wariemon:20161026083402p:plain

色においても、感覚で決めるのではなく、意味や文脈をもたせるべきです。
フリルでは、ここまで “フリマ" 自体を表現するということを意識してきました。
 
フリマ(Flea Market)の発祥はヨーロッパにありますが、その中でも代表的なものがパリの「蚤(のみ)の市」です。
そこから、フランスのトリコロールをモチーフにすることを考えました。

また、今のフリルが使っている色も 赤・白・紺 であったことも大きな理由で、この色の発色をよくして使っています。
最後に、フリルがプライマリーカラーとして使っている がまず目に入るように、赤を左に、青を右に差し替え、フリマの文脈をもちつつ、フリルの実情にもあった色選びを行いました。
 
また、背景色により、屋根の真ん中が視認しにくくなる問題は、ガイドラインを整備することで解決しました。リソースとガイドラインを見ながら適切なものを選べば、問題なく屋根を表現できるようにしました。

f:id:wariemon:20161026084641p:plain

 
4. ロゴタイプも刷新

f:id:wariemon:20161026081428p:plain

シンボルが生まれ変わると同じくして、ロゴタイプも大きく変わりました。
 
今までの Futura を使用したロゴタイプは、シャープで「おしゃれ・かっこいい」という印象を与えるタイプのフォント選びでした。
しかし、「既成のフォントをほぼそのまま使用し、特徴がない」「新しいフリルがもたれるべき印象とずれている」という課題がありました。
 
また、Rの足が長く、直線が多い、FRILという綴りの中では、R と L に挟まれた I の左右の余白が掴みづらく、あまり美しい形ではありませんでした。

f:id:wariemon:20161026082845p:plain

新しいロゴタイプは、より正方形に近い重心の低いフォントをベースに、オリジナルのロゴタイプを作成しました。
 
シンボルと一緒に使うことを考え、結果的にロゴタイプに強い特徴は持たせませんでした。
意識した点としては、書体を変更し、文字同士の空間を視認しやすくまとまりのある印象に
最後に角丸をすこし甘めにかけ、従来のものよりウェイトを重くすることで、安定感とかわいらしさ、シンボルとの相性を意識した調整を行いました。
 
 
 
新しいフリルをよろしくお願いします!

f:id:wariemon:20161026091412p:plain

ここまで読んでくださり、ありがとうございました!
新しいフリルのロゴに込めた想いと経緯を解説させていただきました。
 
みなさんに愛されるプロダクトになるように、UIだけでなくビジュアルデザインにも力を入れていきますので、どうぞ、新しいフリルをよろしくお願いします!
まだアプリを落としたことのない方はこの機会にぜひ落としてみていただければ幸いです。 
 
また、10月22日から、山田孝之さん主演のCMが放映開始しました!
手数料無料をわかりやすく説明する面白いCMになっておりますので、ぜひテレビでもネットでもチェックしてみてください!
新しいフリルのアプリアイコンも最後にどんと真ん中に入っております!
 
 

「Fashion Tech meetup #3」を開催しました

f:id:invent:20160929174726p:plain

こんにちは。エンジニアのcutmailです。

先日、GMO Yoursさんにて、Fashion Tech meetupというイベントを開催しました!

このイベントは、Fashion x Technology をテーマにしており、MERYを運営する株式会社peroliさんと、iQONを運営する株式会社VASILYさんと共同で開催させていただきました。

弊社からは、pompoponakamuuuがWeb版フリルにReactを導入した話や、アプリのプッシュ通知をいかにオフにされないようにするかという話をしました。

続きを読む

カスタマーサポートへの愛が止まらない「CS FES '16 Jul.」を開催しました

f:id:infablic:20160801202301p:plain

みなさん、初めまして。Fablicでカスタマーサポート(CS)を担当している@daisuke_fujimotoです。

7/28(木)にFablicのCSとしては初めてイベントを主催しました。「CS FES '16 Jul.」という、CSを愛する人達のスキルアップを目的としたイベントです。今回はそんな「CS愛」にあふれるイベントをレポートします!

続きを読む

「Think User First #4 ユーザーファーストなサービスの立ち上げ方」を開催しました

f:id:take-june:20160627104124p:plain

こんにちは、デザイナーのtakejuneです。 6/18(土)に「Think User First #4 ユーザーファーストなサービスの立ち上げ方」という勉強会を開催しました。

Think User First はクックパッド社と共同で運営しているサービスデザインの勉強会です。 4回目となる今回はFablicの新規開発フローを学び、その一部を体験できるワークショップを開催しました。

続きを読む

フィードバックを活かすために、知っておいて欲しい3つのこと(翻訳本風)

f:id:infablic:20160622171042p:plain

はじめまして。エンジニアの id:unlearned です。
Fablicでは半期に一度、同僚からのフィードバックを受ける仕組みがあります。

新入社員などは初めて受ける公式のフィードバックです。
主に社内若者向けにフィードバックをどのように今後に活かしていけば良いだろうか?
そんなポエム*1を社内で公開したところ、大変好評だったため、inFablicで公開させていただけることになりました。

以下、ご参考までに。

*1:Fablicにはポエムを嗜む文化がある!

続きを読む

写真で振り返るWWDC2016

iOS イベントレポート

皆さんはじめまして、iOSエンジニアをやってる@tomonobu_satoです。

先週開催されたWWDC2016に参加してきました! Keynoteの様子や、各セッションはすぐにアップロードされ、他のサイトでもたくさんまとめられているので、現地での様子をレポートしたいと思います。

続きを読む

Google I/O 2016 セッションまとめ ②: What’s new in Android Wear 2.0?

Android

こんにちは!Androidエンジニアの @nakamuuu です。

今回は Google I/O 2016 で行われたセッション What’s new in Android Wear 2.0? から、Android Wear 初のメジャーアップデートとなる Android Wear 2.0 の新機能や気になったポイントを開発者目線でまとめていきたいと思います。

f:id:nakamuuu-muuu:20160602135310p:plain

続きを読む

iOS 9でアップデート後にアプリが起動できなくなる問題の原因と解決方法

iOS

こんにちは。iOSエンジニアのshobyです。

最近、頭痛の種だった、iOS9でアップデート後にアプリが起動できなくなる問題について、原因が判明し、解決方法がわかったため、お伝えします。

この問題はiOSのバグが原因です。 ユーザーへは、iOSの9.3.2へのアップデートを案内しましょう。

アプリ側の対策としては、使用するサードパーティ製Frameworkの数を減らすことで、問題発生の可能性を減らすことができます。

続きを読む