はじめまして。Lobiチーム意匠部のばっこです。
カヤックで「Lobi」というスマホゲーマー向けSNSのデザイナーをしています。
去年の8月頃に社内の受託チームからLobiチームに異動をして、
半年ほどLobiの周辺サービス(Lobi REC SDK、Lobi Play)を担当したり、
少しだけ新規サービス(RANKERS)のお手伝いをしたりしていましたが、
最近、Lobi本体のアプリに携わるようになりました。
世間のUXブームに遅ればせながらも、業務でUXについて考える機会が増えてきたので、
今回は、そんなLobiでのUXデザインの取り組みを紹介したいと思います。
Lobiは、スマホゲームに特化した国内最大級のスマホゲーマーSNSです。]]> 何のためのUXデザイン?
同じゲームをプレイしている友達を探したり、攻略情報を交換したり、レアアイテムを披露し合ったりしながら、ゲームを通じて新しい仲間を見つけることができます。
そもそも、何のために「UXデザイン」をするのでしょうか。
Lobiの場合、「デザイナーがサービスの改善にもっと貢献するため」の手段の1つとして取り組み始めました。
というのも、
本来、Lobiのデザイナーの仕事は「ゲームをもっと楽しくする」体験を提供することであり、
その目的のためであれば、デザイナーという職業にこだわる必要はなく、何でもやれる自由なポジションにいます。
しかし、僕がLobi本体に参加した時のデザイナーチームの主な仕事は、
「チームの誰かが考えた施策案を元に、必要な画面を作ること」でした。
このギャップを埋めようと思ったときに、
記事タイトルにもある「ヒューリスティックマークアップ」が効果的でした。
「ヒューリスティックマークアップ」は、ユーザー調査のための手法の一つです。
書籍「一人から始めるユーザーエクスペリエンス」の中では、以下のように説明されています。
ユーザーの行動を写真で記録したり、利用しているサイトやアプリのスクリーンショットを撮り、自分の感じたことを記録してください。
それらの体験の一つひとつのステップをパワーポイントの新しいスライドに貼り付け、ユーザーの気持ちになって使ったときに知ったことや、考えたことなどを記録してください。
「ヒューリスティック評価」「ヒューリスティック法」と言えばご存じの方も多いかもしれません。
それと似た、その簡易版という位置づけの手法です。(「ペルソナ」に対する「プロトペルソナ」のような)
簡単に言えば、「ユーザーになりきって見る」というだけの手法なのですが、
「UXデザインって何をしたら良いの?」という状態だった僕にとっては、
むしろそのお手軽さがちょうど良かったです。
Lobiで初めて試してみたときの資料はこんな感じです。
本来は社内向けの資料なので、あまり体裁にこだわる必要もなく、
以下の4ステップで簡単に実践できます。
例えば、「そのアプリをApp StoreからDLして起動し、チャットで初めて発言するまでの体験」とか、
「そのアプリで友だちを招待しようと思い、実際に招待をするまでの体験」など、
これから改善をしたいフローを決めます。
フローの一連の流れのキャプチャをすべて撮ります。
その際に、各画面で感じたこと・気づいたことをしっかりメモしておきます。
(「ユーザーがそのシナリオでその画面を触ったときに、本当にそう思うか」ということに気をつけながら見てください)
キャプチャとそれに対するメモが用意できたら、スライドに1画面1枚でまとめていきます。
(スライドはパワポでもkeynoteでも何でも良いのですが、僕は共有が楽なのでGoogleスライドを使っています)
画面に対して「起こったこと」「思ったこと」「次のアクション」を書くなど、
何かしらフォーマットを作ると、まとめやすく、読みやすくなります。
ここが一番大事で、このために資料を作ります。
チームの目に触れる場所で資料を共有して、意見を募ります。
(Lobiチームでは、社内のslackのチャンネルに貼って共有をしました)
この「ヒューリスティックマークアップ」に取り組み始めた時点で、
「言われた通りのものをつくるのが仕事」という状態から脱却できます。
デザイナーしか気にしていなかったようなことを、スライドにまとめて共有することによって、
「デザイナーだけが感じている問題」が、「ユーザーに起こりうる問題」として可視化され、
チームがデザインの議論に参加しやすくなります。
それにより、早い段階でデザイナーだけでは気づかなかった指摘をもらえて手戻りが減ったり、
デザイナーには無かった観点の意見をもらえるようになります。
具体的な画面とセットで問題を可視化すること、
それをチーム全体に共有して関係者を増やすことによって、
自然と話を次のアクションに繋げやすくなります。
更に言えば、「ヒューリスティックマークアップ」を最初にやることによって、
他のUX手法にも繋げやすいように思いました。
(仮説の精度を上げるためのユーザーインタビューだとか、そのインタビューを元にペルソナをつくるだとか)
いかがでしたか?
今回は、UXデザインに取り組み始めた頃のLobiの話を紹介させていただきました。
「UXデザインって何から始めたら良いの?」と悩むデザイナーさんの一助になれば幸いです。
クライアントワーク事業部、ソーシャルゲーム事業部、Lobi事業部など色々ありますので、
是非一度コーポレートサイトを覗いてみてください。
(つい最近、3年ぶりに全面リニューアルしました!)
iPhone SEは4inchi画面となり、5系と同じ画面サイズになりました。
ピクセル数的にも[1,136 x 640ピクセル解像度、326ppi]と同等のものになっていますので、
今回に関しては珍しく
新たな画面サイズ対応は不要です!
そもそも画面サイズってどう対応したらいいの?とお悩みの場合にはiPhone6発売時に書いたこちらの記事をご覧ください。
①簡易ラボ形式のユーザーテストを"生"でマジックミラーのついた本格的なUXラボがなくてもユーザーテストは行えます。身近な機材で構築する「簡易ラボ」を使った"生"のセッションを会場でライブ公開します。②「クライアント」と一緒に見学ユーザーテストLive!では、クライアントの企画開発チームが皆さんと一緒にテストを見学します。彼らと共に「泣き・笑い」しながら、リアルな雰囲気でテストを体験できます。今回はハイブリッド黒板アプリ「Kocri(コクリ)」の開発チームをクライアントとして、ユーザーテストを実施します。③OOBEを検証ユーザが製品を箱から取り出して、使えるようにするまでの体験を「OOBE(Out Of Box Experience: 開封体験)」と言います。Kocriは単独で使用するアプリではなく、ハードウェア(Apple TVとプロジェクタ)と連動します。そこで、今回はその初期設定から初回利用までの一通りの体験をテストします。
当日はカヤック社内の会議室でユーザテストの実施し、社内の別室でそれを見学することができます。
僕を含めUI部のメンバーが設営などで一部お手伝いをする予定です。
今回のイベントは僕が個人的に体験したくてお声がけさせてもらいました。
ご協力いただいたみなさん、ありがとうございます!
自社の製品テストの様子も楽しみですし、社内でどうやればユーザーテストの準備ができるか学びたいと思います。
横浜近郊のみなさん、近場であまりないUX関連の勉強会の機会です。
申し込みは先着で30名のみです。よろしければお早めにお申し込みください!
東京と横浜あたりのイベントを行きたかった順で並べました。
(行けない前提なので、日程・金銭面を考えずに順をつけています)
最近、『ユーザーテスト(ユーザビリティテスト)』という言葉を耳にする機会が増えているのではないでしょうか。それは、ユーザーテストがUX、人間中心設計、デザイン思考、リーンスタートアップといったイノベーションを生むための活動に欠かすことのできない重要な手法だからです。そんなユーザーテストを仕事帰りに・手軽に・気軽に体験できるのが『ユーザーテストLive! 見学会』です。これまで以下のような"旬"なアプリのテストを実施してきました。
The Tokyo Service Jamは、サービスデザイン愛好家が、「48時間で世界を変える」を合言葉に、チームでリサーチ、アイデア創出、プロトタイプ制作、遊び、シェア、学習を通して一連のサービスデザインのプロセスを体験できるイベントです。
UXをしっかり提供することが求められる昨今ではデザイナーが果たす役割は、デザイン制作過程だけでなく、意思決定プロセスやプロダクトチーム作り、仕様設計等も含め幅広い領域となります。 そこで、本イベントではデザイナーと事業企画者それぞれの視点で、組織・チームとしてデザイン思考を上手く活かし実践するために何をすべきか、登壇者と来場者でディスカッションを通して、プロダクト開発に関わる人々のデザインへの理解を深め実践へ活かしてもらうことを目的としています。
体験をデザインするーー。顧客体験をテーマに、さまざなジャンルのスピーカーを招き過去4回開催してきたExperience Design (XPD)シリーズ。今回のテーマは、「Data × Design」。IoT、AI、ロボット、日々進化するテクノロジー。さまざまなモノがデジタル化し、蓄積されていく膨大なデータ。企業は、それをどう活かし新たな体験をデザインしていくのか?
グラフィックデザインという領域を現代社会に対応してアップデートするためにはどうすればいいのか。法律、社会学、表象文化論、哲学といった領域の最前線で活躍する講師を招き、それぞれの角度から光をあてることで、グラフィックデザインを再構築する視点を提供する。
以上になります。
なので、業界関係者からは刺される覚悟で「UI/UX」という括りで今回は今年のゲームを振り返ってみたいと思います。
[画像:アイドルマスターシンデレラガールズ スターライトステージ]
従来のリストからクエストを選んでというタイプとは違い、
ぼくとドラゴンでは放置系ゲームのようにマイページで簡単なクエストを行えるゲームデザインとなっていました。
アプリを開くとすぐにやることがあるというのは、わかりやすい体験です。
さっきの通信速度を逆手に取ると、通信中もいかに楽しんでもらうかという視点に繋がるかもしれません。
ゲームの使い方の説明もいいですが、長く遊んでもらうユーザーにとって何が楽しんでもらえるのか、考えてみるチャンスに思えました。
そもそもはよそ見をすることが多いスマホでは見逃しやすいので、会話にログ機能をつけるアプリは多かったです。
ログボタンを押す > ログを表示 という形はノベルゲームなどでは一般的な形ですが、テキストだけの表示で淡々としています。
頻繁に過去の会話を見るとしたらそれも楽しくしよう、そんな意図があるのではないでしょうか。
数字の桁数をわかりやすくするためにカンマを入れるのですが、ちょっと見た目重くなるのですよね。
それに比べるとわかりやすさは多少減りますが、見た目は重くならないこのアイデアはカジュアルな雰囲気のゲームには合っています。
大雑把にかつ大きく値を動かしたい時に重宝します。
昔のゲームで言うところの上下キーで10の桁を動かすやつの感じですね。
こう並ぶとスマホシフトを実感できます。
もちろん、正式なシリーズに繋がるものもあればそうでないものもありますが。
妖怪ウォッチやポケとるなんかは、遊び方がパズルに変わりつつも、元のゲームのコンセプトと繋がっており安心感がありました。
パワプロやモンハンは元のゲームをスマホで実現するために、UIや機能の削り方を見て取れました。
スパロボは、僕(ら)がスパロボに求めているものは何かが再確認できました。
コンシュマーゲームのブランドをどうスマホに持っていくか、
という点ではそれぞれとても参考になります。
ありそうでなかった、ペーストボタンです。
長押しをする手間がなくなるだけで、こんなに快適に思えるとは・・・!
実は個人的には今年イチオシの機能でした。
これは同じような操作をする全てのゲームに入れて欲しい...!
LIFELINEは素晴らしい体験でした。
ですが、あれ以外の答えはまだ見えていません。
ウォッチでゲームをすることが必要なのか、話はそこからかもしれません
海外では当たり前の感ある課金額により優遇が受けられるVIP制度が、国内大手メーカーからも始まりました。
いかがでしたでしょうか。
百聞は一見にしかず、取り上げたゲームを遊んでみてください!
今年のトピック、みなさんの意見もお聞かせください。
それでは良いお年を!
http://www.darkechogame.com
これまたおしゃれミニマル系ゲームです!
音の反響をビジュアル化、それを手掛かりに進む迷路ゲームです。
発想にもびっくり。是非みなさん自分のiPhoneで体験してみてください。
http://ultraflow.net
こちらもミニマル系ビジュアル。
壁にぶつかってもよい回数が制限されている中でゴールに向かうゲームです。
モンストユーザーとしてはどうしても下に引っ張ってしまうのですが、フリックです。
ぶつけてもレーザーとかは出ません。
Download from AppStore
いかにもな期待させるビジュアル、そして爽快感!
パワーのインフレが起きるゲームとして話題になってるみたいですね。
操作は簡単!ただタップし続けるだけ!
http://1button.co/mrjump
すごく話題になっている激ムズ系のゲーム。
リリース4日で500万ダウンロード達成らしく、なんとも景気がよいお話。
ゲームのビジュアルが如何に遊んでもらえるかに関わってくるかがよくわかるゲームですね。
Download from AppStore
ドット絵万歳!ともいわんばかりにドット感満載ななめこ系ゲーム。
自分で武器を増強して、星を撃ち落とす爽快感も大事なポイントです!
おすすめはミサイルです。
http://nearlock.me
以前、Knockというアプリがありましたが、このNearLockもすごく便利そうです!
iPhoneを持って近づくとMacのロックが外れ、逆にiPhoneを持って離れるとロックがかかるアプリ。
バックグラウンドでも機能するようにするためには、有料版にアップデートする必要あり。
http://meerkatapp.co
Twitterのフォロー / フォロワーの関係の中でライブストリーミングできるサービス。
キーカラーの黄色と、キャラクターが印象に残るこれ以上にないシンプルなビジュアル。
ストリーミングをロードしているときにこのミーアキャットくんが手をばたばたさせているところがいいですね。
https://www.periscope.tv
Twitter社からリリースされたストリーミングサービス!あれ、Meerkatは...完全に一緒?
そんなことはありません。Meerkatが、方向的にクローズドな流れ(フォローしているひとのみ見れる)のに対して、
こちらは全世界に向けたストリーミングサービス。
個人的には、チュートリアルのイラストや流れが美しさが印象に残ってます。
http://pixeltweet.hand-sum.com
ベスト新着アプリ入りも果たしたもはや人気アプリ!PixelTweet。
簡単にドット絵がかけちゃいます。そして何よりよいのは音ですね!
ただ書くだけではなく、ゲームの世界にいるような感覚になります。
Download from AppStore
泣く子も黙るInstagramによるまさにレイアウトアプリ。
Hyperlapseのカラーリングは今後メインになっていくのでしょうか。
個人的にはロゴのバランスが気になってしょうがないです。
こんにちは!
わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。
去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。
みなさん、サイト制作のときにいれるアニメーションなど、どこから着想を得てますか?
ぼくは、Hoverstates というサイトをよく参考にしています!
実際に使われているアニメーションが多く掲載されているこのサイトの中から厳選のアニメーションをまとめました!
]]>
ぼくがよくこの Hoverstates を使う理由としては以下の4点があります!
こんにちは!
わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。
去年から OH (http://wariemon.com) という名前でも活動中です。
昨年末にリリースされた カヤックの新規カメラアプリFILTERS 、もう触りましたか?
FILTERS が気になるかたはこちら!
今回は、フィルターカメラアプリの制作時に役立つ
「カメラフィルターアプリの撮影画面UIまとめ」のお話をします!]]>
カメラフィルターアプリにはまず大きくこの2パターンが存在します!
この2パターンに分類して、UIの参考になりそうなアプリをまとめていきます。
最近だと "Pomelo" に代表されるフィルターをかけながら撮影ができるアプリです!
今回ぼくたちが制作したFILTERSもここにあたりますね!
こういうアプリは切り替えられるフィルターをどこにおくかが一番課題ですね。
このタイプのUIだと
こちらは みなさんご存知・大好きの、Instragram に代表される
撮影画面はシンプルで、その後のフィルターをかけるのは別ページというパターンです。
この系統のアプリというのは撮影という軸より、編集という軸に重きが置かれている気がします。
事実この手のアプリは VSCOcam が顕著なように、すでにある写真を編集するという機能がメインであったりします。
・Instagramで写真を撮影して、そのまま編集してアップ
という人より、
・撮影自体は標準のカメラアプリなどで撮影して、編集する
というパターンのほうが多いのではないでしょうか。
1. のパターン(フィルターをかけながら撮影)と、2.のパターンでは機能の重心が大きく違うと言えそうです。
参考になりそうなアプリのUIをまとめてご紹介します!
こんにちは!
わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。
去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。
昨年末にリリースされた カヤックの新規カメラアプリFILTERS 、皆さんご存知でしょうか?
"みんなでフィルターをつくる" 全く新しいカメラアプリ、それが "FILTERS" なのです!
FILTERS が気になるかたはこちら!
今回は、その新規アプリ制作において非常にキーになった
「ユーザーを最短でゴールまで導くマインドマップ遷移図のススメ」のお話をします!]]>
遷移を自分で責任もって引くということは、すべての画面に理由がなければつくれません。
そこで出てくる理由とは開発陣のスキルや、納期など、色々制約がありながらも、
ユーザーの利益に向いているべきです。
今回、ぼくは初めて書いてみたのですが、それまで見えなかった**3つの大事な部分**が見えてきました。
アプリの内容から、アプリを使うユーザー像を見定めましょう。
今回はFILTERSを参考にざっくり考えてみます。
FILTERSはカメラアプリでありながらフィルターの開発プラットフォームです。ここで見えるユーザーのタイプは
みんながつくったフィルターをつかって撮影して楽しむだけでなく、
PCと連携して、"GLSL"という言語でプログラミングで開発ができます。
AさんとBさんには、アプリをインストール・使用するのにあたって
満たしたい欲求・ゴールがあります。
はじめまして!
今年デザイナーとして面白法人カヤックに入社しました、さーやです。
クライアントチームにてデザインの勉強、絵を描いたり、写真撮ったり、美味しいもの食べてます。 デザインに関わっていると、毎日のように画像の送りあいをします。確認のためだったり、マークアップエンジニアにpsdデータを渡したりなど。送り合う時間をなるべく短縮すべく、色々なツール使っています。また友達間でも、大量の写真を送り合ったり、画像を見せ合ったりしているのにもこういったツールを使っています。
そこで今回は、速度が5倍くらい早くなる画像+ファイル転送術を色々なツールを通じて紹介致します。
]]> 方法① Skypehttp://www.skype.com/ja/download-skype/skype-for-computer/
昔からある不動の便利SNS。チャットもビデオ通話ももちろんできる、リアルタイム制重視ツール。
-画像をドラッグ&ドロップでするだけで送れるので楽!
画像を受け取ったか確認することができ、さらにスカイプログインさえしていれば、自動的に受け取る設定もできます。
送信速度も早いので、重宝してます。
-送信時に、相手がスカイプにログインしていないと、受け取れない。 psdなどの重いファイルは受け取りが苦手です。
ウェブ上にファイルをアップロードするだけで、URLを吐き出してくれる一般向け便利サービス。
無数にサービスが存在しますが、有名なのは以下です。
http://firestorage.jp/
http://gigafile.nu/
-パスワードもログインも必要ないし、アップロードとダウンロード時間が基本的に早いです。
URLにアクセスし, ダウンロードリンクを押すだけなので、スムーズで楽。
-大きい容量のデータも送れる (gigafile などは1ファイル5ギガまで)
-生成されたURLをメモしないと、再アクセスが難しい。
-サービスによってはダウンロードURLが期間限定。(※firestorageなど)
ファイルが一枚など、軽い場合はとても便利。
ただし、重いとメールボックスの容量が危険。
スマフォのUIデザインの時に特に便利です。スマフォで画像を受け取ると画面100%で見れるので、サイズ感等のデザインチェックができます。
よくあるのが、自分宛に画像を送り、Gmailで開き、デザインチェックすることです。
重いファイルを添付すると、Gmailの容量を使ってしまうので、気をつけなければならない。
また、クライアントに画像を送るときも、画像を小さくして送るなどが必要なので一手間がかかる。
Gmail アカウントを持っている人であったら誰でも15ギガまで無料で使えるサービス。
WEBにアップロードした画像を、ダウンロードなしでそのまま見られる。
スマフォからも見られるのですぐにレスポンスができて便利。
また、前の画像を消さずに改訂管理ができる。前のデザイン案など振り返る事ができる。
重いファイルはアップロードに時間がかかる。
Macデフォルトでついている機能。シチュエーションが揃ってないと、滅多に使わない機能なのですが、すごく便利。
USBいらず。同じMacユーザーで目の前に送る相手、もしくは同じWi-Fi内に画像を送りたい相手がいる場合は最速の方法。
Wi-Fiがなくても、Bluetoothで10m以内のMacを検知してくれるので、ネットワークがないときは便利。
やはり、重いファイルは時間がかかる上、ネットワークが切れた場合は途中で中断してしまうこともある。
さらに、相手も受け取りのボタンを押す必要があるので、面と向かってやりとりができる場合のみ有効。
https://gyazo.com/ja
画面に映るものなら何でもスクリーンショットでき、URLを生成してくれる。 GIFなどの動画も撮ることができます。
アップロード+ダウンロードが一切なく、ファイルではなくURLを送るので、一番早い共有方法です。
ダウンロードができないので、URLをメモしないと、画像元への再アクセスが困難。ただ、一時的な共有にはとても便利です。
https://www.dropbox.com/
言わずと知れた、オンラインドライブ。2GBまで無料で使える上に、URLを共有することができる。
PC版をインストールすると、PCとDropboxのファイルをcloudで共有できるので、ログインでアクセスしなくても使える。
psdなど重いファイルを扱う場合は、2GBだとすぐに使ってしまうので、大量のデータを扱う場合は有効ではないかもしれません。
Facebookでグループを作ってしまえば、その中でファイルを共有できる。
SNSを使うついでに、ファイルなども確認できるので、以外と確認のタイムラグが少ない。タイトル、メールアドレスなどは記入しなくても良いので、メールより手軽。
facebookにアカウントを持っている、かつ、送りたい人と繋がっていなければいけないので、知り合いの間のみででしか共有ができない。
無料SNSサービスは基本的に、知り合い同士で画像をシェアできるが、以下のサービスは公開が必須なので、 使い道が限定的になるかもしれません。
http://www.pinterest.com/
気に入った画像を集め、URLをシェアできる。
https://www.flickr.com/
写真などをアップロードし、大きく見る事ができる。
https://www.tumblr.com/
ブログ形式で画像をアップロードし、そのURLをシェアできる。
いかがでしたでしょうか??
どのサービスが一番良い、というよりは、色々なサービスを知っておいて、
TPOによって使いわけたりするのがベストですね。
また、案件か友達間であるか、という場合によってもサービスを使い分けた方がプロの使い方ですね。
既に同じような初心者側からの記事があがっていますので、今回はユーザー体験そのものではなく、それに向けてUIデザイナーとしてどう取り組んだかという話をします。
当たり前なんですけど、ゲームではワクワクすること・面白いこと・感動すること等が価値になってきます。
コンテンツや仕組みでそれらを実現できた時代もありましたが、それは今は昔。*3
体験>それを構成する感情のストーリー>それぞれの感情を想起させる構成要素
結局ストーリーがないとUIがろくに作れないってことがわかったし、なによりゲームが面白くなる保証がない。
僕の今までの手戻りの時間に比べればストーリー作る時間の方がはるかに短かったです。
なので、UIを作るよりストーリーを作ることを優先しようという話でした。*6
こういうのをラフの時点から入れると楽しい画面ができるよという小ネタをいくつか。
ゲームニクス*8から引用したものや、先輩から教えてもらったものなど。
あまり意味の無い補足
*2
または生暖かい目を。
ちなみにこのブログのH1はでかくて読みづらいのでH2から使うことがしばしばあります。
IA的にめちゃくちゃですみません。
*3
僕も含めブラウザゲームしか経験してないUIデザイナーは今(たぶん)苦労しています。
表示する機器の制約が大きく、ゲームシステムもヒットした某かの流用となると必然的にUIに求められることは少なかった環境では、多少のわかりやすさと、バナーやヘッダーなどパーツとしてのグラフィックへ力をかけることぐらいしかできませんでした。
その段階ではここで話すストーリーの力などは身に付くはずもなく、チームにそれをやる人が不在の場合、デザイナーができてないという話になりますが、しかし辛い。
と言っていますが、それは携帯電話ゲームの話であり、それまでの家庭用・携帯ゲーム機などがだいぶ昔に通り過ぎた場所であります。なのでデザイナーが今学ぶべきはAppstoreのランキングに並ぶライバルではなく任天堂だと思ったり。
*4
以前は(1)からダイレクトに(4)をつくっていたり、
場合によってはいきなり(6)からなんてこともありました。
その結果としては、わかりやすい(=読める)けどなんか楽しくない・思っていたのと違うという画面になり、やり直すことが多くチームに苦労をかけました。
その場合はみんなの頭の中にあるモデルがバラバラのまま話をするわけで、まぁいい意見もあれば見当違いの意見もあると。。
*6
もちろんチームにストーリーをつくる人が他にいれば、UIにフルコミットします。
個人的にはストーリーをつくる仕事もやれた方が結果的にUIの自由度もあがるのでUIデザイナーは進んでやった方がよいと思っています。
*7
今回の記事はデザインのラフをテーマにしたものだったので、あまり表に出せるものがなく寂しくなってしまいました。
LTや勉強会みたいなその場限りのスライドでなら見せられるものもありますので、
もしよければいつでもお声がけください。
また、こんなことしている僕におすすめのアプローチや書籍などの情報がありましたら、
ツイッターでもはてぶコメントでもなんでも構いませんのでご紹介いただけると助かります。
*8
サイトウ先生のゲームニクス理論についてはとりあえずこちらを見るとよいです。
便利な時代になりました。
いまや情報はキュレーションされて、自分に合った情報だけが簡単に手に入ります。
ですが。
そんなに簡単に情報を手に入れて良いのでしょうか?
這いつくばって、泥臭く得た情報(以下、キラキラした情報)の方が
喜びや価値は大きいのでは?
私、カヤックデザイナーのTumblrフリーク、ゲンです。
私のTumblrブログの数は41です。
今回ご紹介するのは、私も実践する〝深く良く効く、Tumblrを最高に使う方法〟
このブログをお読みのようなハイスペックな皆様には
Tumblrってなに?という説明は抜きでいきたいと思いますのでよろしくお願いします。
「大量フォロー?俺、フォローは厳選してるし」
「見たい情報が流れるじゃん」
「変なポストが入ってきたらいやだな...」
そう考える気持ち、よく分かります。
ですが、冒頭にも述べたように、キラキラした情報はそう簡単に手に入りません。
自分の興味のなかった情報が予期せぬ収穫となる事もあります。
すべてを享受していく気持ちでフォローを増やしましょう。
小手始めに、自分に近いユーザーからフォローしていくと良いでしょう。
以下におすすめのフォロー基準を紹介しますので実践してみてください。
Tumblrではポストの中にリブログ元が表示されています。
尚且つ、そのリブログ先が未フォローだと[+]ボタンが表示されます。
「なんてセンスの良いリブログだ!」と思った時にはこのボタンを押し終えてると良いでしょう。
「私のポストをリブログするとは、気が合うな」と感じる時は無いですか?
自分の気に入ったポストをライク/リブログするということは、
自分に近い人間に違いない、そう思い込んでフォローしましょう。
Tumblrをしているとたまに、他とは違う「これぞ!」というポストを発見することがあります。
そういうポストをライク/リブログしている人、これもまた自分に近い人間であるに違いありません。
片っ端からフォローしましょう。
自分の内面がそのままブログに反映されるのがTumblrの素晴らしい点です。
見返した時の一覧性を上げるためにサブブログを作りましょう。
好きなようにサブブログを作っていただいて結構ですが
こういったサブブログの作り方もおすすめします。
ちなみに、
サブブログはいくつでも作ることができます。日本語のドキュメントには
最大で10件のサブブログを作成できます。
https://www.tumblr.com/docs/ja/blog_management
とありますが、正しくは一日最大10件までです。
You can create up to 10 of these per day.
https://www.tumblr.com/docs/en/blog_management
カッコイイ、カワイイ、自分の好きなものはすぐに判断できます。
では、なぜ好きだと思ったのでしょう?
グラフィックが?モデルが?意図せずに写ったものが?自分の気分的に?投稿された日が?
その答えをサブブログにしてみましょう。
http://paradisecore.tumblr.com/
なんとなく良い!けど何が良いのか分からない。
サブブログにするほど好きでもないけど見逃すのも癪。
そういうポストは、「とりあえず置き場」ブログへリブログしましょう。
ここまでやりきった人はおそらく秒速数10ポストが入ってくるようになったと思います。
土台が整ったところであとはDIGしてリブログするだけです。
そこで、アツいTumblrの使い方にピッタリなオススメ最強ツール1選をご紹介します。
https://github.com/poochin/tumblrscript/wiki/Tumblr-Tornado
Web版Tumblrの使い勝手を向上させるChrome拡張。
中でもチャンネルダイアログのショートカット機能が便利です。
サブブログへ一瞬でリブログできる機能です。
「リブログボタンを押して、リブログ先を選んで、リブログ......遅っせえ〜!」
なんてことはもう無くなります。
この機能は自分のブログ一覧の順番を上から1〜9キーに割り当てています。
よく使うブログを9つ(メインブログを抜いて8つ)選んで並び替えておきましょう。
深く良く効く、Tumblrを最高に使う方法をご紹介しました。
どれもすぐに実践できるものばかりですね。
今回取り上げたのはTumblrですが、TwitterやPinterest、Soundcloudなど、
様々なSNSにも応用できますので是非ともご活用ください。
楽しいTumblrライフを満喫できるように願っております。
]]>
今回はtumblrについての記事です。
tumblrに関する記事はググればいくらでも出てきますが、
このデザイナーズブログではまだ扱っていないようなので、
tumblrの魅力と、tumblrサイトのカスタマイズのはじめかたを、
僕なりに紹介してみたいと思います!
・tumblrってなんとなくは知ってるけど、一体どんないいことがあるの?という方
・いまtumblrを使ってて、もうちょっとカスタマイズしてみたい方
・これからtumblrでサイトを作ってみようと思ってる方
そんな方に向けた記事です。
このブログを見ているような方々なら、今や知らない人のほうが少ないのではないでしょうか。
それほどにすでに有名なサービスですね。
一言で説明すると、
tumblrとはSNSやブログなどの機能を持ち合わせた非常に多機能なwebサービスです。
・・・合ってるかな?
僕はそう捉えてます。
そしてその多機能さ故に、さまざまな使い方が出来るのも特徴です。
twitterやfacebookのようにsnsとして他人の投稿をダッシュボードで見たり、フォローしたり、リブログしたり、お気に入りしたりすることも出来れば、
自分の投稿を公開する専用のページがあるため、いわゆるブログとして日記的に情報を発信することも出来ます。
そんなsnsやブログなど複数の機能を融合させたtumblrの、
今回は主にブログ部分の魅力に注目してみます!
そんなtumblrブログの魅力の1つに、そのカスタマイズの自由度の高さがあります。
ブログのカスタマイズの画面に行くと、たくさんのテーマの中から好きなデザインを選ぶことができます。さらに、テーマごとにオプションが設定されていることが多いため、何の知識もなくともそこそこ柔軟な設定が可能です。
また、htmlを直接編集することもできるため、ある程度のhtmlやcssの知識があれば、
自分のブログを制限なく自由にカスタマイズすることが出来るのです。
その自由度の高さから、tumblrブログは様々な使い方が出来ます。
snsとして気に入った他人の投稿をリブログやお気に入りして貯めていったり、気になったページを投稿してソーシャルブックマークのように使ったり、
または自分のつくった作品を投稿してポートフォリオとして使ってもいいでしょう。
あるいはその名前の通りいわゆるブログとして、日々情報を発信していくのもよし。
その他には企業サイトやアーティストサイトのようなものにも多く使われています。
「ブログ」の概念に縛られず、自由にサイトを作ることが出来るのです!
上に挙げたように、tumblrでは様々な用途のサイトを実現することができます。
画像やcssファイルやjsファイルなどの静的ファイルをアップロードすることも出来るため、
極論を言えば、tumblrの特徴を全く使わずにhtmlを書いて、サイトを作ることさえ出来てしまいます。
ただし、サーバー側のプログラムを動かすことは出来ないので、そういったことが必要な場合には向いていません。
逆に言えば、サーバー側のプログラムが必要ないサイト、小規模なサイトにはもってこいです。
自分でサーバーを立ててwordpressを入れて、、、とするよりも、
その開発コスト運用コストは大きく削減できるでしょう。
また、ブログはもちろんのこと、
「投稿」を1単位として利用できるような、コンテンツを並べるようなサイトなど、
tumblrを投稿システムとして、CMS(コンテンツマネジメントシステム)として利用できるようなサイトには非常に向いていると思います。
CMS全般に言えることかもしれませんが、
「投稿者にweb開発の知識が必要ない」というのは大きなメリットじゃないでしょうか。
挙げればきりがありませんが、少しだけ紹介
・キュウソネコカミ グッズでんたく
こちらはカヤックで制作したサイトです!
・ユニクロ銀座
・ニコン
・twitterステータス
テーマを変更したことがある方はすでにご存知だと思いますが、
まずは基本的なカスタマイズの流れについて説明します。
ダッシュボードの画面から"カスタマイズ"を押して、カスタマイズ画面に移ります。
ここで"テーマを見る"から好きなテーマを選んだり、
下のオプションでそのテーマを自分好みに設定したりすることができます。
テーマにもよりますが、ここのオプションだけでもなかなか柔軟なカスタマイズができたりします。
しかし今回は、その一歩先を解説しちゃいます!
カスタマイズ画面の"HTMLを編集"を押すと、
現在のテーマのhtmlやcssがだーっと書いてあると思います。
先ほど「極論を言えば、tumblrの特徴を全く使わずにhtmlを書いて、サイトを作ることさえ出来てしまいます。」と言いましたが、それを確認してみましょう。
書いてあるコードを全て消して、以下のコードをコピペしてみてください。
<html>
<head></head>
<body>
hello world!
</body>
</html>
"プレビューの更新"を押してみると、、、
hello world!と表示されたでしょうか?
htmlを少しでも触ったことがあればわかると思いますが、これは基礎中の基礎ですね。基礎のキですね。キのkですね。
このように、基本はhtmlです。
恐れることはありません。
そこに、tumblrの特徴を利用するためのtumblr独自のタグ(と呼びます)を追加していきます。
サーバー側のスクリプトの入ったhtmlを触ったことのある人なら、イメージはそれに似ています。
<html>
<head></head>
<body>
{Title}
</body>
</html>
自分のブログのタイトルが表示されたかと思います。
お分かりの通り、{Title}がtumblr独自のタグになります。
ちなみにcommand+zとかで元に戻れます。
すでに出てきたように、tumblrにはその特徴を利用するためのtumblr独自のタグがあります。
tumblrの独自タグには主に変数(Variables)とブロック(Blocks)の2種類があります。
先ほどの{Title}は自分のブログのタイトルを持っている変数です。
ブロックはこんな雰囲気です↓
{block:Posts} {/block:Posts}
ほんとうはこの独自タグを詳しく解説しようかとも思ったのですが、
長くなるし今回の趣旨ではないので省きます。
独自タグについては、公式ドキュメントが最も参考になります。(英語ですが)
公式ドキュメントを見れば独自タグの全てが書いてあります。(英語ですが)
日本語に訳しているものもあります。こちらとこちら。
しかしいきなりドキュメントを見たって、何がなんだかわかりません。
(少なくとも僕はそうでした。)
なので、以下では僕がつまずいたポイントを2つお教えします。
tumblrの投稿には色々な種類があります。
僕は最初、投稿の種類とかをよく知らないままにtumblrサイトを作ろうとして、
リファレンスを見て、独自タグ多すぎ!わかんねえ!
と、なかなかに苦戦をしました。
そんな状況で全ての種類の投稿とその要素をかっこよく表示させようったって、そりゃ無茶でした。
実際にtumblrで投稿したことがあれば大体ご存知かと思いますが、
tumblrの投稿の種類は、以下の7つがあります。
・テキスト投稿
・画像投稿
・引用投稿
・リンク投稿
・チャット投稿
・音声投稿
・動画投稿
まずは投稿の種類と、それぞれにどんな要素があるのか、ということをしっかり理解するようにしましょう!
--
この記事を書いている途中で気づいたのですが、この内容はドキュメントのIntroductionに書いてありました。。。
ドキュメントはしっかり読みましょう、ということですね。。。
Introductionとか読み飛ばしていました。。。
--
ちなみに、とりあえず全ての投稿に対応させたいのなら、htmlは公式ドキュメントのGet Startedの下部にある
「Here's an example of the complete markup for a theme:」の部分のソースや、
こちらで紹介されているテーマスターターを使うのもいいでしょう
また、僕が最初に理解できずにつまずいた部分のひとつに、
IndexPageとPermalinkPageがあります。
こちらはタグとしては書いてありますが、あまりしっかりとは説明が書いていないかと思います。
IndexPageはその名の通り自分のブログのトップページで、
PermalinkPageはそれぞれの投稿の個別のページです。
独自タグのブロックのタイプのもので、
{block:IndexPage} {/block:IndexPage}で囲った部分はインデックスページでのみ表示され、
{block:PermalinkPage} {/block:PermalinkPage}で囲った部分は個別のページでのみ表示されます。
そしてtumblrでは、基本的にこれらを同じソースの中に記述する必要があるので、1つのソースが煩雑になってなかなか大変です。
こればっかりは慣れるしかないかも知れませんが、IndexPageとPermalinkPageについてはしっかり意識しながらカスタマイズをするようにしましょう。
いかがでしたでしょうか。
少しでもこれからtumblrサイトを始めようと思っている方々の参考になれば幸いです。
そして最後に、宣伝です!
きたる2014/10/11 (土)に、
【HTML5飯】第3回 Webフロントエンジニア交流会@横浜
が開催されます!
おいしくてためになる!
WebフロントエンジニアがLTをききながらみんなでご飯を食べる会です。
興味のある方はぜひ!
Facebookと
peatixの両方で募集しています!
お好きな方からどうぞ!
android勢からすれば当たり前かもしれませんが、
やっぱりこのサイズは画面上半分触るの厳しいです。
実はついこの間リリースしたゲームは、
ユーザーにタップしてもらう領域をなるべく下半分に寄せてました。
作り始めたのは1年前なんですが、6+でも快適に遊べそうなので、そこでやったことの話をします。
こういった話はあまり見ないので、チームやデザイナー同士の話のたたき台にでもしてもらえると嬉しいです。
]]> ゲームの説明と特性今日の話のネタになるのは「ぼくらの甲子園!ポケット」というゲームです。
今日の話に必要な情報はこんなとこです
どんなところがでかい画面サイズの端末でも遊べるポイントだったのかと言う話をしていきます。
制作を始めた時点ではiPhone5が出ていたのですが、
わりと手の大きい僕でも、あの画面左上にある戻るボタンが片手持ちでは押しにくいなと思っていました。
この辺りの理由から、開発のかなり初期から戻るボタンは下に移しました
ソーシャルゲームでは戻るボタンを下に置いたものが当時あまりなかったのですが、「まぞくのじかん」で採用されており参考になりました。
まぞくのじかん 公式サイト
ちなみにですが、ゲーム内のお知らせやらなんやらを全部掛け合い漫才でやっているノリが好きです :)
もどるボタンの仕様としてはiOS標準のドリルダウンのような階層構造に準じたものではなく、
Android標準のバックキーのように直前の画面に戻るに近い形にしています。
時々階層をくだるだけじゃなく、横に飛ぶことがあるので、その時もユーザーが歩いてきたところを戻れることを優先した感じです。
おかげでAndroidでのバックキー対応は楽にすみました。
情報エリアというのはユーザーが今の状況が判断できるようなものを置くエリアで、
操作エリアというのはユーザーが次に行いたいアクションのためのUIのエリアという設定です
クエストのゲーム部分では(例えばパズドラのように)やってるタイトルは多いです。
上のもどるボタンの後に、ゲーム全体でもユーザーがタップするのは画面下の方にまとめたいと思うようになりました。
何を上に出して何を下に出すかという切り分けが難しいところは、DSのゲームを参考にしてました。
DSは下がタッチパネルであることや持ち方の特性上、上に情報を出して下で操作をさせることが一般的です。
(余談ですが最近出たスマブラ3DSはこの関係が上下逆なんですよね。
この形の難しいところは、たくさんのリストやサムネイルを出せないところと画面が2分割されてみえやすいところです。
状況と結果がはっきりとしていて、たくさんのものから選ぶ場合は無理にこの形式にしないほうが良さそうです。
ポケットでは例えばアイテムを売却する画面などでは、画面全体にサムネイルを並べています。
また、画面全体での1つの風景を作りたいところではやはり採用していません。
ただその場合でも重要度の高いものからできる限り、下の方にボタンを集めるようにはしています。
このレイアウト対応と戻るボタンについては同じようなことは「白猫プロジェクト」でもやられています。
白猫のリリースが制作終盤だったので参考にはできませんでしたが、
戻るボタンは固定にせず必要な画面にだけ出すという対応は、今後試してみたいです。
最後に、こうすればよかったかなと思いつつ、できなかったことの話です。
有効性がはっきりしていないことなので、雑談程度に受け止めてください。
戻るって押してるところでもユーザーの操作的には前に進んでいることも多く、
そもそも戻るってこと自体が二度手間感があるので、ユーザーが行いたい次の動作が戻るボタンではない形で示されるといいなーと思いました。
ほら、もどるより進んでる方が気持ちいいじゃないですか。
左が従来の一度操作を終えた後に一度「戻る」を押して戻ってから新しい操作に進むイメージ。
右が操作が終えた後に「進む」を押して新しい操作に進むイメージ。
画面の遷移は変えていません。
もちろん右の場合には、常に新しい画面に進んでいるデメリットとして今の位置がわかりにくくなるということも予想されますが、
それはツアー型パターンで解決ができそうです。
これは小さいところではボタンの文言を変えれば済むところであり、大きいところではゲームサイクルに通じる話かも知れません。
マリオで面白いなーと思った仕掛けがありました。
確かWiiのマリオでユーザーのアクションスキル向上の為に、1-5ぐらいまで進んだ時に1-1をもう一度やらせるんです。
それを単に戻ってやってくれというのではなくキノピオがでてきて、アイテムが盗まれたから僕と一緒にあのステージにいって取り返してくれというように新しいミッションって形で提示していたことです。
ユーザーの操作は一緒なんですが、これは1-1ではなく1-1'をやっていることになるので、戻っている感じがあまりしませんでした。
iPhone6+ 横の方が使いやすいよな、って思ってます。
iPadもそうでしたが、ツール系のアプリでは縦横両対応のものも既に存在しています。
その場合大事なのが、利用シーンの想定を変えること。
実は既にKleeというゲームで試みられています。
縦持ちはイージー操作モードで、横持ちはじっくり操作モードと言った具合です。
(まだ遊んでないので詳しいことが言えません。ごめんなさい)
また、Sword & Sworceryでは基本は横持ちですが、敵と戦う時に縦持ちにするという変則的な扱いが入っていました。
これは画面内のボタンではなくデバイスをボタンとして扱うという意味でも面白いかったです。
Sword & Swocery
FEZと並んで当時大はまりしたドット絵ゲームです。サントラも買いました
レイアウトの手間が倍とまではいかなくてもかなり増えることと、
ゲーム性への影響もあるので、簡単にはできないでしょう。
ですが、装備選択画面だけは横持ちでじっくりできるとか、限定的な対応は面白いかもしれません。
以上です。
今後のアプリ開発の参考になれば嬉しいです。
(追記 140919 11:00)iPhone 6 Plusを入手しました
特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです(主観だけど)
(追記 140920 15:00)iPhone 6でのアプリUIについて別記事たてました
iPhone6/6+の発売がいよいよ明日となりました!
二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、
慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。
ひとまず気にするのはこの辺りの情報!
あとはおまけで便利そうなリンクも載せました
これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。
それにしても時代はレスポンシブです。
やれやれだぜ。
端末 | 解像度 | インチ | 書き出し | 画面サイズ | 制作サイズ |
iPhone 4 | 326ppi | 3.5inchi | @2x | 640 x 960 | 640 x 960 |
iPhone 5 | 326ppi | 4inchi | @2x | 640 x 1136 | 640 x 1136 |
iPhone 6 | 326ppi | 4.7inchi | @2x | 750 x 1334 | 750 x 1334 |
iPhone 6 Plus | 401ppi | 5.5inchi | @3x | 1080 x 1920 | 1242 x 2208 |
アイコンはいつもtemplateを公開されているPixelResortから早速iOS8版として公開されています
App Icon Template (PixelResort)
また、それぞれのアイコンやスプラッシュのサイズはiOS Human Interface Guidelineでみることもできます。
iOS Human Interface Guideline - Icon and Image Sizes
*iOS8版日本語訳はまだ公開されていません。
今までのスプラッシュはPNG画像1枚でしたが、Xcode6からオプションが増えました。
iOS Human Interface Guideline - Launch Images
*日本語版はまだ公開されていません。
端末 | 画面サイズ | 制作サイズ |
iPhone 4 | 640 x 960 | 640 x 960 |
iPhone 5 | 640 x 1136 | 640 x 1136 |
iPhone 6 | 750 x 1334 | 750 x 1334 |
iPhone 6 Plus | 1080 x 1920 | 1242 x 2208 |
いつもアプリ作った後とかに宣伝で使いますよね。
appleさんから公式の素材が既に出ています。
利用する用途などの制限もありますので、ページに書かれている用途も合わせて読んだ上で使ってください。
今回のiPhone6について、Keynoteでこんなことを言っています。
「iPhone6や6+については単純な拡大ではなく、それぞれに適したレイアウトをつくるといい」(超意訳)
例えば今のiPhone6のページを見るとわかりますが、ホームスクリーンではアイコンを大きくせず、アイコン間のスペースが広くなっています。
iPhone 6 Plusについては単独でUIのセットもできるようです。
つまるところ、iPadとは違う第三・第四のレイアウトセットが必要ということですね。
しかしiPadと違い、ユーザーとの身体的距離・利用シーンは変わらないですから、iPadと同じというわけにもいきません。
時代はレスポンシブです。
やれやれだぜ。
いずれそういった枷を逆手に取った面白いものがでるかもしれないんですが、
まずは今手元にあるものをどうするかということで考えてみました。
さらに踏み込んだマルチレイアウト対応については、また別記事を書きます!
(追記 140918 21:15)
こちらの記事のスケーリングモードという項目でわかりやすいサンプルが取り上げられています
iPhone6/iPhone6 Plus画面サイズ対応
余談ですが僕がやっているゲーム開発について
Unityの対応もまだなので、いまできることは少ないです。
またゲームはスクロールさせないことを前提に作られている部分も多く、
いろいろなサイズに対応させるには四苦八苦させられます。
もういっそコンシューマーのように、複数サイズ前提で考える時が来たのかもしれませんね。
最後に関係ありそうな資料や記事のリンクを。
時々追加していきます。
画面サイズでまよったら
(まだiPhone6が入ってないのですが)
Xcodeで簡単に動かせるサンプラー:iOS 8 の新機能のサンプルコード集『iOS8-Sampler』を公開しました
iOS 8から導入されたWebGLで動いているサイト: WebGLのサイトつくりませんか?
情報が間違っていたり、ここに書かれていること以外で知りたいことなどあればぜひコメントなどでお知らせください!
(140918 23:58 )スプラッシュと書くべきところスクショと書いてましたので直しました。
(140919 15:30 )PixelResortと書くべきところの一部がPixelEesortとなっていたのを直しました。
ちなみにこんなタイミングでアプリ開発終盤に差し掛かっている僕のゲームはこちらです(- - )
ぼくらの甲子園!ポケット 公式サイト
iPhone版もリリースしました!
6 plusでも問題なく遊べてほっとしています。
]]>