普通の農場アプリは、育てて、収穫して、売れば終わり♪だと思うんですが、このララファームは少し違います。
作物を収穫したら、料理が作れるんです!普通の作物を売るよりも料理の方がお高く売れるんですよ。さらにスタッフのウサギにふるまえば体力の減少が防げたりします作物用の成長促進剤の合成や、ウサギちゃんのレベルアップなど、収穫量をUPするポイントは盛りだくさんです。(少しRPGっぽいかも?)
それから、ビジュアルがとても凝っていて、キャラクターやアイコンはもちろん、世界観がとてもかわいいんですね~ただ眺めているいるだけでも農場の草や小川がゆらゆらすれたり、ウサギが歩いて居るのを眺めていると癒されるかもしれません~
普通の農場アプリよりもゲーム性が高いので、少し複雑ですが...その分いろいろできますし、アプリ自体がとてもかわいいので一度遊んでみて下さい
Fireworks CS5/4/3 (速習デザイン): 山口 有由希: 本
これによると、いままでFireworksの困りポイントが改善されているとのことで、現在でも(CS5だとメモリ不足のエラーが起きるため)CS3を使っている私にはジェネレーションギャップ中なのです。
テキストのアンチエイリアスがPhotoshopと同等!!(CS4以降)
さらにイラレの文字組もそのままFireworksに持ってこれる!!
これは印刷物からデザインを起こす時に便利そうです。
グラデが美しくなった!!
グラデーションのディザが増えたのだそうです。
GIF256の減色し過ぎが解消!!
今回これが一番の衝撃でした。CS5すごいー!
ということで、ちゃくちゃくと改善されているようです。ブラボー!Adobe!!
あわよくば、イラレ並の文字組とペンツールの機能、そしてフォトショ並の画像編集が追加されるとウハウハなんですが・・・さすがにそれは無理かな。
---------------
第2回 開発前におさえておくべきmixiアプリ企画のポイント
---------------
(ゲームユーザーは)「暇つぶし」が目的の人がたくさんいます。電車での移動中、待ち合わせ、お昼休憩など、何かと何かの隙間の時間にアクセスしてきているのです。そのため、1回のプレイ時間が短いゲームが好まれる傾向があります。
SNSゲームのポイント
1回のプレイは短く。かつ、数ヶ月の単位で長期的に遊べる
↓↓↓↓↓
■定期的に遊べる
・行動制限
・1日1回だけログインプレゼント
・毎週月曜日に新アイテム公開
■長く遊べる
・あなただけのペットを育成しよう!
・ゲームの結果を実績で表示
・コレクション要素やガチャガチャ
・あなただけのアバターをデコレーションしよう!
ユーザーの獲得方法
・招待にインセンティブを持たせる事(招待するとポイントGET!など)
・SNSで拡散
・アプリ名や拡散文言はわかりやすく、クリックしたくなるような名前に(ひと目でそのアプリを想像できるように)
mixiアプリの記事ですがとても勉強になりますね。たしかに、いつでも同じように遊べるよりも、その時遊ばないと貰えない何か!があった方がログインしそうですね。また、アクティブなユーザーを確保するために、長く遊べる工夫やユーザーの新規獲得も重要ですね。(それが大変なんだろうな、ともお思いますが)
---------------
そのiPhoneアプリ、企画段階から道を誤っています!-アプリヤ新城健一氏
---------------
単機能アプリにする
ちょっとした空き時間に、さっといじれる、単機能に特化したものにする。
ランキング上位に長期滞在していたのは、単機能のアプリ。
こっちはiPhoneアプリの記事ですが、mixiアプリと同じことが書かれていますね。
この前ウチの母親から「ひたすらうさぎをキャッチするゲームなんてあきちゃうじゃん!」とのダメだしを頂いたので、複雑にしようかな...とも思いましたが、やっぱり単純なゆるゲーにしようと思います。
ただし、確かにそれだけだとすぐ飽きちゃいそうなので、毎日アクセスする工夫と、長期的に遊べる工夫と、ユーザー獲得の工夫は必須ですね!
---------------
iPhoneゲームのトップクリエーターが語る
「iPhoneアプリ成功の方程式~企画編」
---------------
市場で成功を収めているプレーヤーたちの9つの共通項
・自分が欲しいものを作る
・爆速(とにかく速く!)
・本気
・勉強熱心
・iPhoneが好き
・世界で唯一のもの
・ユーザーの声を聞く
・とことん突き詰める
・自分が得意なものを作る
アプリの魅力が『一瞬で』伝わることが重要
「ユーザーは、そのアプリを買うべきかどうかを『一瞬で』決める。従って、そのアプリの魅力を一瞬でユーザーに伝えるための工夫が必要だ。さらに、ユーザーは購入したアプリを起動して、30秒以内にそれを使い続けるかどうかを判断する。従って、アプリを起動してすぐにその面白さが伝わるような仕様にしなくてはいけない」(宮川氏)
こちらの記事はとても熱くて、軽い気持ちで作ろうとしていた私は怯んでしまいました。「本当にこのアプリで勝負になるのか?」と言われたら・・・ちょっと悩んでしまいます。でも「作ろうとしているものは、自分がほしいものか?」と言われたら、答えはYES!なので頑張ろうと思います。
そして、分かりやすさがとても重要なようなので、あまり膨らませず、やることを絞って行こうと思います。
---------------
iPhoneゲームのトップクリエーターが語る
「iPhoneアプリ成功の方程式~プロモーション編」
---------------
メディアとの関係構築が売り上げにつながる
どんなに魅力的なアプリを開発しても、ただそれをApp Storeに登録するだけでは、誰にもその存在を知られることなく、アプリの山の中に埋もれていってしまう。ダウンロードランキングのトップなど、とてもではないが望むべくもない。そうならないためには、アプリをリリースする1週間前のプロモーション活動が勝負を決めると宮川氏は言う。
・紹介用のWebサイトを立ち上げる(メディア用に画像や文章も準備)
・YouTubeに「紹介動画」をアップロードする(1分前後)
・メディアにメールを送る
いままで個人制作のアプリでプロモーションなんて無理でしょ?と思っていましたが・・・できるんですね。きっと私はまだ「本気」ではなかったんです。
また、発売前にプロモーションをかけるのがポイントで、そうすればリリース直後にダウンロードされてランキング上位に食い込みやすくなるとのことです。
---------------
iPhoneゲームのトップクリエーターが語る
「iPhoneアプリ成功の方程式~開発・制作編」
---------------
ユーザーのネガティブな反応『分からない』『ダサい』『使いずらい』
・何といっても、自分が作ったものを実際にいろんな人に見てもらう。逐次改善
・ロード時間を短縮する
・操作の手順数を極力減らす
・画面変化の見た目をスマートにする
・継続して使い続けてもらえるかどうか、実地検証してみる
ここら辺は、自分以外の誰かの協力が必須になりそうですね。しかし、ここにたどり着くのはいつになることやら。。。
ということで、いまま何気なく遊んでいたiPhoneアプリですが様々な工夫がされているようです。たしかにランキング上位のアプリは、上記のことが洗練されているような気がしますね。今回の調べ物でとてもいい事を知りました。O先生に感謝ですね。
最近ガラケーからiPhoneになりまして、アプリで遊んでいたら、自分でも作りたくなりました。O先生に相談した結果、企画とデザインを準備すれば作ってくれるとのことということで、少しずつ準備しています。
どんなアプリを作りたいかというと「アリスが落ちてくるうさぎをひたすらキャッチする、キャッチゲーム」です。ゲームに慣れてない女の子でも遊べるような、ゆるゆる~い感じにしたいです。そして、なぜアリスかというと私がアリスが好きだからです。どーん!
てことで、メインキャラクターのアリスのキャラクターを作ってみました。きちんとキャラクターを作るのはほぼ始めてで四苦八苦。トレースしても上手くいかないもので・・・結局Adobe Illustrator10で主線なし絵を参考につくりました。最初に当たりを作ると早い早い
アリスは、黒髪ショートで赤ドレス、ちょっと性格が悪いいい性格をしている、うさぎを耳で持っちゃうような子です。不思議の国で大暴れしてほしいですね!
ここで晒したからには、ちゃんとリリースできるように頑張りたいです
最近テキストをドラックして選択するとハイライト色が指定してあるサイトが多いので組んでみました。
selectionというプロパティを使えばOKのようです。ただし、[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシートによると、IE8以下では対応していないようです。それから、ハイライトのカラー部分に画像は使えないっぽいです。
デザインをしているとこういった表現は軽んでしまうというか、忘れがちなんですが(リンク画像もよく作り忘れる・・・)紙と違ってwebならではの表現だと思うので、気をつけるようにしたいです。
]]>
最近テキストリンクでホバー時に背景画像を敷いているのを、よく見かける気がするので作ってみました。作っていたら、いろいろ表現があることに気づいておまけも作ってみました。破線が動くのはアニメーションGIFです。
作っていて気付いいたんですが、クリックエリアは広いほうが押しやすいですね(当たり前なんですが)PCでもpaddingを指定した方がアクセシビリティ的にいいのかも、と思いました。
]]>
いままで、テキストの量によってボタンの長さを変えるなんてできないと思ってたんですが、下記の記事を発見したので実際に組んでみました。
Lesson 10 テキストの長さに応じて幅が伸縮するボタン - Webデザイン表現&技法の新・スタンダード・デザインパーツ編 - MdN Design Interactive
私の場合は背景の画像を3つ使っていているので、spanが2個入れ子になっています。
CSS3でやるのとどっちが早いのかなぁ...とか、文字が大きくなった時にくずれちゃうなぁ...とか思いますが、コーディング上、無理だと思っていたのが実現できたのでビックリです。
]]>
テキストリンクでhover時の装飾を太文字にすると、カーソルを合わせた時に文字がズレて(?)見えるのってなんとかならないかなぁと、最近思っていました。でも、マウスを乗せた感を出したいから太字にしてるわけで・・・ごにょごにょ
いままでは「コーディング上しょうがない」と諦めてたんですが、今日「hover時の太文字を辞めたらいいんだ!」と気づきました←超当たり前
考えてみるとマウスを乗せた感を出すのに太文字以外にもたくさん表現はあって、背景に色を追加したり、下線を表示/非表示にしたり、文字の色を濃くしたり・・・と、いろいろ表現がありました。なぜならhover時とON時は違うんだから!なんでいままで気づかなかったんだろうorz
]]>
レスポンシブwebデザインに挑戦しました。今回はスマホで縦と横でレイアウトが変更されるように組んだ...はずです。iPhoneでは良い感じなんですが、Androidだとどうなんだろう・・・
作ってみての感想は、あたりまえだけどデザインは2個必要で、コーディングも2ページ分作る感じなんだな、ということ。そして、htmlは一枚なのでそれも考えてCSSを書く必要があるんだな、と思いました。(縦バージョンのメニューを背景までimgタグで切っちゃうと縦にした時に変になっちゃうので、背景はCSSで指定しました)
いろいろ四苦八苦しながらも、思ったよりは簡単に作れましたイエイ
【Android2.2以降にも対応(?)】position:fix;で
ヘッダーとフッターを固定してみた
いままでAndroidでposition:fix;は無理だと思っていたんですが...
Android 2.2以降で、viewporがuser-scalable=noの場合だとposition:fixed;が使えるとの情報をゲットしたので試しに組んでみました。ちょっと手元に実機が無いので検証できませんが。。。とりあえず、O氏のAndroid端末(バージョンは未確認)で問題ないようだったので...とりあえずこんな方法もあるっぽい?くらいの感じで思って頂けるといいかなと思います。
そうしたら、近々IEの強制アップデードが開始すると聞いて、焦りつつも「一度でもアップデートを拒否した時のあるユーザーは対象外」みたいな記事を読んだような(うろ覚え)気がして油断をしていたら...強制アップデートされてしましました。。。
...マイクロソフトさんから更新のアイコンが来てたので、手動ではなく、自動アップグレードをかけたのが良くなかったです。気付いたらIE8にバージョンアップしようとしているので、急いでキャンセル。再起動してバージョンを確認したらIE7に...orz
でも、たしか一回アップデートしてもバージョンダウンできたはず!と急いでバージョンダウンをしたところIE6に戻った!やったー!と思っていたのですが、
私のIE6は純正のIE6と違う挙動をするようになりました。
(私のIE6ではフェイスブックアプリが使えなくなりました)
なんでも、一度アップデートしてしまうと、純正のIE6とは挙動が変わってしまうそうです(T○T)
ということで、もし、お客さんからIE6の挙動がおかしいと言われたら、それは純正のIE6と一度アップデートしたIE6の2つがあるようです。会社によってはIE6でしか動かないアプリを使っているところも多いので、一度アップデートしてもバージョンダウンする可能性があると思います。ちょっと気を付けようと思いました。
]]>
プログラマさんによって作りかたが違うんですが、ざっくり書くとこんな感じかな、と思います。
======
■ざっくりサーバの中
├□html ★htmlディレクトリ内には静的なファイルを置くよ!
│ └□pc
│ ├□css
│ ├□img
│ └静的.html
│
└□scripts ★scriptsディレクトリ内には動的なファイルを置くよ!
└□templates
└動的.html
======
●相対パスで納品→システム埋め込み後にルートパスになるパターン
--
・普通に相対パスでコーディングして、htmlディレクトリにアップする。
・プログラマさんがシステム埋め込む。
・システムが埋め込まれたページはルートパス(上記の場合は/pc)に記述変更され、scriptsディレクトリにアップされる。
--
でも、動的なファイルだけルートパスになると、ルートパスと相対パスがちゃんぽんになっちゃっうので、静的なファイルもルートパスにしてまるっとscriptsディレクトリに置くことが多いみたいです。
それじゃURL変わっちゃう気もしますが、そこはシステムであたかもhtmlディレクトリ内なるかのようにファイル?を書き出してくれるので問題ないようです。
●ルートパスで納品→システム埋め込みになるパターン
--
・ルートパス(上記の場合は/pc)でコーディングして、scriptsディレクトリにアップする。
・プログラマさんがシステム埋め込んで、scriptsディレクトリにアップする。
--
この方法だとプログラマさんがリンクを書き換える手間が省けますね!ただし、コーディング側としてはルートだと基本的にローカルで表示確認できなくなっちゃいますね。
というように、システムが絡む場合はhtmlファイルがどこに移動されても、リンクが切れないようにルートパスで書くことが多い気がします。
ちなみに、昔はシステムも静的ファイルも同じディレクトリに格納してたりしていたそうですが、最近は分けるのが流行り?らしいです。
それから、システムが入る前の静的なhtmlファイルをは削除しないで、htmlディレクトリにそのまま置いておいてもいいような気がしますが、URLを叩くと静的なhtmlが見れちゃうので基本的には削除するようです。
そして「templates」はシステムを吐き出すガワ?仕組み?みたいなものみたいですね(うまく説明できない...) なのでtemplatesのキャッシュはシステムが吐き出す時に古いファイルを読みに言ってる...みたいな現象だと思います。
たぶん、こういうことだと思うんですよね。そんなに外してないと思うんですが。。。
とりあえず、はじめの頃よりも随分システムのことがわかって来た気がします。イエイ★
この前、某MTGに出たら紹介されたwebサイト。
海外で作られたHondaのサイトのようですね。小さいウィンドウの位置を変えてスタートボタンを押すと、あら不思議ピタゴラスイッチのように進んで行きます。Flashを使わないでこういった表現もできるだなんて凄いですね!
そして、IE6が無くなった時にこういうコーディングが出来ないと、きっとお仕事ってなくなっちゃうんだろうな、と背中がヒヤリともします。「IE6が対応してないので...」という枕詞はいつまで使えるのでしょうか...ヒヤヒヤ
でも、IE6が無くなったら、そのぶん表現の幅は絶対広がるので、楽しいことも絶対待っているはず!楽しみでもありますね。
▼CMとのコラボのようですので、CMもご紹介。
まず、お仕事をしていてなんとなく知っていた「スマホはほとんどwebkitらしい」ということ。でも世の中にはWindows PhoneなんてものもあるのでこれはIEですよね。なのできっとiPhone とAndroid はきっとwebkitなんだと思います(探したけど良いソースが見つからない...orz)
それで、webkitと聞いて「ああ、SafariやChromeか!」とデスクトップで使うブラウザをイメージしたんですが、どうやら、デスクトップのwebkitとモバイルwebkitはイコールじゃないらしいんですね。
▼下記引用
-----
事実1
iPhone4 のモバイルWebkitは Safari5として判定(正しくはモバイルWebkit)され
Android2.x のモバイルは全てWebkitは Safari4として判定されたこと。
事実2
Android の中で E-Mobile の HTC Aria が最も CSS3などのサポートがすぐれていたこと。
事実3
Android の中で Softbank の Dell Streak の CSS3とHTML5のサポートが非常に悪かったこと。同じ Android で何故、このように CSSのサポートの差異が発生するのか明確な理由がわかりません。
Webデザイナーとしてモバイルウェブの開発する時には、デスクトップのWebkitとモバイルWebkit が同じだと思ってはいけないでしょう。またデスクトップのWebkitでできたからといって、iPhoneとAndroid が同じ結果になると考えてもいけないでしょう。
-----
私はうっかり、デスクトップのwebkitを想像してしまっていましたが、大きな間違いのようです。一年くらい前の記事なのでちょっと古いですが、たぶん現状はあまり変わらないんじゃないかな、と思うので「モバイルwebkitだから全部一緒と思うのは危険」と思いました。
コーディング開始時に素材がすべてそろってることってなかなかないですよね...スケジュールがキツキツの場合1つでも不足があるともうそこで終了!っなんてことになりそうな時もあったりでヒヤヒヤしますできるだけ先回って、これとこれとが必要ですーと前もって言うようにしてますが、いつでも完璧にそんなことができるわけも無く...
そんな時に教えてもらったのが下記のURL
コーディング前に確認しておきたいこと。
とてもまとまっていて分かりやすいです。デザイン面での注意点もあってなんてステキ
でも、毎回このサイトを開くわけにもいかないので、上記サイトを参考にエクセルにまとめてみました頭の最初に□を作ったのでチェックできますね。さらに個人的に必要と思う項目も増やしておきました(SNSとか)
これはまだプロトタイプなので、怪しいところも沢山ですが...。ちょっとずつ精度を高めて行きたいです。それから項目も増やしたいです。
てこで、興味のある人は下記からDL★
コーディングに必要んさものリスト(coding_checklist.xls)