泡沫webディレクター お仕事日記
大阪と神戸でwebディレクター・デザイナー・その他色々やっている「Sponge Design スポンジデザイン」のブログです。

デザイナーのFlex画面デザイン・コーディング vol.2 Flash Builder 4の場合(1)レイアウト

comments: 0

Flash Builder4が出てからのコーディング方法をまとめようと思っているうちに月日は流れ…。

先日からまたFlex4/Flash Builder4でコーディングしているので、忘れないうちに現在の方法をまとめます。

実は、最初は試しにFlash Catalystでちょっと画面遷移の効果も入れて制作してみたのですが、プログラマにダメ出しされてしまいました。
確かに、ソース見ても全てのステートがMain.mxmlにごちゃっと入っていて整理されていない…。
また、Flash Catalystに読み込んだPhotoshopのレイヤ名に日本語を使っていたらソースにそのまま入っているし… こらーやりにくいやろうな、とは思いました。

Catalyst→Builder4へスムーズに渡せるデータを作る知識がないこともあって、やっぱりFlash Builder4でコーディングし直すことにしました。

Flex3(Flex Builder3)で制作していたときに一番時間がかかった「コントロールごとにcssで変更出来る要素を探すこと」は、「Adobe® Flash® Platform 用 ActionScript® 3.0 リファレンスガイド」で検索できるようになってだいぶ効率アップ。(2011-06-27 ページタイトル/リンク先が変更されていたのに合わせ修正)
ただし、外部cssファイルに書いて反映されるかどうかは、相変わらずやってみないとわかりませんが…。

以下、前回と同じく全くの自己流ですので、間違い・勘違いの部分やもっと効率的な方法をご存知の方はご指摘いただければ幸いです。

Read All »


Posted by sponge design on 3/4, 2011 :: Categories 仕事
Tags ::


10万円でサイトを作れと言われたら

comments: 4

以前の記事で似たようなことを書いたのだけれど、リニューアルにしろ新規制作にしろ、いまだに「予算は10万円以下」と言われて説得しなきゃいけないとか、「知り合いだから安くやったって」と社内の(!)営業に言われた…とか、そんな話をよく聞くので、自分が今そういうことを言われたら、どう返すかなーと考えてみた。

お客さんの言い分は「ホームページ作るのになんでそんなにお金かかるん? 誰でも作れるやん。」みたいなことだとして、

本当に10万円しか出す気がないお客さんの場合

私の返答:
「ただホームページがあればいいのでしたらできますよ。
 公開後に「問い合わせがない」とか「検索で1ページ目に出ない」とか
 言わないでくださいね。
 もし、更新のご依頼が有る場合は、都度見積もりさせていただきます。」

で、テンプレート買ってロゴだけ差し替えるみたいなサービスとか、無料ブログとかでちょこちょこと作る。
先方の要求を満たして自分も損しない。

しかし、作業範囲記述書に印鑑もらっとかないと、後からトラブルになりそうな予感。
こういう「ただあるだけの意味がないサイト」の後始末は、いつか他の人がやらなくちゃいけないハメになると思うので、できれば自分は案件自体をお断りしたい。

説得の余地がありそうなお客さんの場合

私の返答:
「御社で、これからホームページの更新担当者として誰か雇ったと仮定してください。
 そうしたら、知り合いから
  “ちょっとできる子いるんやって? うちのもちょこちょこっとやってや。
   知り合いだから安くできるやろ?”
 と言われたらどうされますか?
 社員1人分のお給料は御社で出しているのに制作費はもらえないっていうことが普通でしょうか?」

いやいや、これだと工数だけの話になってしまうな。もっとプロが作ったものの価値をアピールするには…。

「インターネットはバーチャルじゃなくて、リアルの世界と同じです。
 みなさんどう事業に活かせるか考えて、お金も時間もかけて取り組んでおられます。
 なのに御社だけが考えなしで作ったもので対抗して勝てるわけがないですよね。
 だからといっていきなり何100万円もかけなくても改善できることはあります。
 優先順位をつけてやっていきませんか?」

って感じかなぁ。
で、10万円分の何か(キーワード、内部テキストを見直すとかテーブルコーディングだったらcssコーディングに直すとか)作業するとか、
アクセス解析見て改善提案したりとか。

しかし、社内の人に理解がない場合、もっと大変そうだな…。


Posted by sponge design on 2/22, 2011 :: Categories いろいろ,仕事


HCD(人間中心設計)の理解 in 京都

comments: 0

表題のワークショップに参加してきました。
http://kokucheese.com/event/index/6604/

講師の浅野先生、主催のモンキーワークス株式会社様、同じチームやお話しさせていただいた出席者の方々、ありがとうございました。

さて、web解析系などの本にヒューリスティック評価とかプロトコル分析の話は出ていますが(「プロトコル分析」という名称は今日初めて知りました)、いざ自分では… できなかったです。
予算が、時間が〜。という言い訳で自分にやる気がなかったとも言えますが、「デザイン作り込む前に知り合いに見てもらいませんか?」ぐらいの提案はお客さんや制作会社に何度かしてはいました。
ですが全然反応がなかったので、実際に体験してみる場を欲していました。

ひじょうに面白く、予想以上に勉強になりました。
自分の頭が固いこともよくわかりました。
会社員時代から3人のディレクターでバラバラに案件を進行させていたので、そのままフリーになってどうも一人で考えて結論まで出してしまうクセがついてるみたいです。よくないです。
あー やわらか頭になりたい。

最近は一般的なwebサイト制作ではなく、システムの画面デザインや設計・フローのチェックなどをご依頼いただくことが増えているので、今日の経験をどこかに役立てられないかと考えています。

チームの発表内容

チームの発表内容

Read All »


Posted by sponge design on 1/23, 2011 :: Categories セミナー・勉強会など
Tags :: ,


IS03の感想 追記

comments: 0

さらに1週間たっての追記。

Bluetoothで写真転送

IS03で写真撮って、webにアップする前にちょっとMacで編集したいとき、「共有」でBluetoothを選択したら超簡単。
前回の記事では転送はUSBの有線接続でいいやーって書いたものの、1、2枚っていうときは無線が便利ですよねー、すみません。
(追記:うちの環境では、IS03とBluetoothで接続するとMighty Mouseの動きがおかしくなるので、やっぱりやめました。)

googleのナビが使えない

起動後に「GPSが使えるかどうか確認しています…」のようなメッセージが出たまま画面が固まる現象が出る件。
一度はリセットで直ったのに、アプリを追加しているうちにまた使えなくなった。今度はリセットでも直らず。
悩んでいる人もいるかもしれないので書いておきます。

回答は2ちゃんのIS03質問スレにありまして、
“プリインストールされてる「モバイルGoogleマップ」のバージョンが古いのが理由なので、インストールし直す。”
とのこと。
直りましたよ、感謝!

以前使っていたmioのバイク用マウントラックがあるので、サイズが合えば今度ツーリング行くときはIS03を使ってみようかなと思っている。
私は超方向音痴で、初めての場所じゃなくても道間違えたりするんで…。

Skype™ au

2つのIDでMacとやりとりしてみて、問題なく使えた、と思う。
まぁ近接して使っていたので音質については評価できるかどうかわからないものの、別にノイズとかもなく、IMも即届いて意外に使えるな、と思った。
仕事相手にIDを通知しようかどうかは検討中


Posted by sponge design on 12/13, 2010 :: Categories いろいろ
Tags ::


IS03買ったので感想など

comments: 0

auから出たIS03。

発売日の1週間前に予約したのに(機種変更です)、意外にも当日にゲッツできまして。
それから1週間ほどたった今の感じをまとめてみました。

※以下「Touch」とは、1年前にPocket WiFi契約時にもらったiPod Touch(第2世代 8GB)のことです。
iPhoneは3も4も使ったことないのでわからんです。4はIS03と画面の解像度が同じなんですよねー 確か。

入力

フリックはTouchで慣れてたので特に問題なし。
反応スピードはTouchより好み。文字種切り替えのインターフェース等はIS03の方が、初めてでも迷いなく使える感じ。

画面

とにかくフォントがきれい。新ゴなんだぜ~。
画面解像度が大きいので、文字がかなり小さくても読めるのがいい。
メモリー液晶は地味だけど素敵な要素。

電池

事前情報通りヘビーには使えないのは確か。もう少し持ってくれればいいんだけど、というのが、やっぱり本音。

待ち受け時にWi-FiをONにしてて電池が減って行く感じはTouchと変わらんと思うんだけど、Wi-Fiでネット見てるときはTouchよりだいぶ減りが速い気がした。
30分強で100%→90%になった。

モバイルブースターは以前から持ってるんだけれど、私の持ってるタイプは別のケーブル買わないと充電できないらしい。
そもそも何時間もネットにつなぎっぱなしにすることもないので(セミナーとかでは講義に集中したいのでネットは見ない)、auのキャンペーンで予備バッテリーもらえることになっているし、今後充電が必要な場面があれば適当に対処しようかと。

アプリ

まとめサイト等々を参考に、ホーム画面の置き換えや常駐アプリの管理とか適当にいくつかインストール。
オンラインのRSSリーダーは好きじゃなかったんで今までアプリで見てたんだけれども、これを機会に整理してGoogle Readerと同期取ることにした。
ブックマークはSafariから直で入れるのは断念。
いったんSafariから書き出してChromeに読み込ませて、GoMarksというアプリでIS03に取り込んだ。
でも標準ブラウザにしかインポートできてないんでやんの… 当たり前か。
ブラウザはDolphinが快適。
(追記:Dolphinにはメニューに同期があったので、結局、チマチマとGoogle Bookmarkに手動でブックマークを登録して同期しました。)

Google Sky Mapは素敵すぎる。

カメラは真剣に使う気がないから別に言うことないけど…。まぁ、画素数=クオリティじゃないしなぁ。
レタッチのアプリはまだ探し中。

通信

家ではWi-Fi使ってAirMac経由でネットにつないでる(今回初めて気づいた… iMacでAirMacを「入」にしたら色んなものが無線でネットにつながることを… なんか今まで色々回り道をした気がする…)。
iMacはMid2007 2.4GHz Intel Core 2で、Mac自体はルータとは有線です。

———-
「AirMac IS03」で検索して来られる方がちらほらいるので、設定方法について補足します。
Macの環境設定→インターネット共有からAirMacの設定をし、IS03側でWi-FiをONにしてMacで設定した名称を選択、パスワードを入力するだけです。
Macの設定方法はAll Aboutの記事等をどうぞ

さらに追記:
Mac OSのせいかIS03のアップデートのせいかわかりませんが、ある時から突然AirMacに接続できなくなりました。
両方の設定を削除して新規に登録し直すとできるのですが、Macの電源をいったん落とすとまた接続できなくなります。
色々やってみましたが、つながらなくなったらAirMacとIS03のWi-Fiをいったん切断して、IS03のWi-FiをON、接続先を探している状態でAirMacをONにすると認識することに気がつきました。
いちいちめんどくさいですが、突然つながらなくなってもこの方法で乗り切っています。
———-

3G回線はWi-Fiより若干遅いな、とは思うものの、twitterみたいなテキストサイトを見る分にはストレスないよ。

BluetoothはTouch用に購入したワイヤレスイヤホンもiMacもあっさり認識した。
認識させただけでまだ使ってないけど、そもそもIS03で音楽聴く気はないので、外でワンセグを見ることがあればイヤホン使うかも、ぐらいかなー。

データ転送

IS03付属のUSBケーブルであっさりマウント、転送も問題なし。
Bluetoothはまだ試してないけど、まぁ有線でいいです。
赤外線は機会があれば試してみるけど、機会なかったりして。
ちなみに前機種からのアドレス帳移行はSDカードでやった。

音楽

MacからSDカードに直接MP3放り込んだだけでアラームや着信音にできるのが素敵。もう有料の着うた買わなくていいのね!
とはいえわたくしは常にマナーモードなので出番は少ない(笑)。

ケース

購入初日にはとりあえず出先で見つけたシリコンケース買ってつけといたんだが、なんだかかさばるし、せっかくのオレンジが見えん。ホコリも目立つぜー。
で、ハードタイプに変更したら、スリムでかっこいい。
ただ上下に空いてる部分が多くて傷つきそうな気がするので、別メーカーのも検討予定。

その他

Touchだとホーム=アプリ一覧なので、はじめ「ホーム画面」の概念がよくわかってなかったんだけれども、触ってるうちにわかってきて、ショートカットを理解したら楽しくなってきた。

マナーモードのカスタマイズができないのが困るったら困る。

よく言われてるアレとの比較についてのアレ

iOSは直感で使える。全てが管理され洗練されていて、操作していてもあんまり迷わない。
Macを使ってたら、さすがに色々と簡単で便利。
Androidはちょっととっつきにくい。ものによってはまだ粗さがあるけど自分でカスタマイズできる範囲が広くて楽しい。

どっちがいいかは使う人の好み次第。
私はどっちも好きさ。どっち使ってても楽しい。


Posted by sponge design on 12/5, 2010 :: Categories いろいろ
Tags ::


入門 ウェブ分析論

comments: 0

入門 ウェブ分析論~アクセス解析を成果につなげるための新・基礎知識~読了しました。

具体的な説明で構成されているので、すぐに実践できます。

↓勝手なまとめ↓

「数字(目標&現状)とグラフ(結果)とレポート(気づき・記録)と知識」で解析する!

アクセス解析の画面を見てるだけではダメで、数字をまとめてグラフにして定期的なレポートを作成することで初めて、「アクセス解析してる」と言えるわけですね。

わかっちゃいるけど、何からやろうか… という場合はヒント以上のものがあると思います。
ある程度アクセス数がないと解析はできないので、自サイトについてはまずはアクセス数を増やすところに取り組んでいる途中ですが、方向としてはそう間違ってない感じ、かな。
とはいえグラフやレポート作るまでのことはやっておらず解析の画面だけ見て漠然とやっているので、もう少しきちんと記録を取ろうと思いました。

また、私はExcelやグラフ作りが苦手で、レポート作りひとつにしてもX軸Y軸の設定から時間がかかってることもあるのですが(どんな初心者)、条件の揃え方や他データと合わせてみせる方法等が掲載されているのでとてもわかり易く、カスタマイズもできそうです。

まずはこの本にある通りのモニタリングレポート作成と、6章の「サイトの課題を発見する10のSTEP」を、アクセス数があるクライアントで全部やってみようかと思います(もちろん解析画面の閲覧許可はいただいています)。
クライアントからは特にレポートが欲しいと言われてるわけではないですが、何か新しい気づきがある気がします。


Posted by sponge design on 10/25, 2010 :: Categories


デザイナーのFlex画面デザイン・コーディング vol.1 Flex Builder 3の場合

comments: 0

アクセス解析を見ると、Flexの画面デザインに関連したキーワードで検索されている方がいらっしゃるようなので、まとめてみました。
ただし、自己流です。エレガントじゃないです。

クライアントから画面デザインを依頼された後に、mxmlとcssでコーディングするところまでしてほしい、とのご依頼をいただいたのは今年の2月頃。
私はFlash使うことすら苦手で写真流すぐらいの簡単なムービーしか作れません。自分でASは書けません。のレベルです。

htmlに似た書式のmxmlという言語にcssでデザインする、というぐらいはちょっと調べればわかりましたが、オリジナルデザインの画面を具体的にどうやってコーディングしたらいいのか、ネットで何時間も探しました。
ボタンひとつを変更、とかじゃなくて、ほぼ全てのパーツをデフォルトスキンのhaloとは違うデザインに変えたかったのです。

当時のことはこの辺りに書いていますが、プログラマ向けの情報はそれなりに見つかるのですが、デザイナー向けの情報ってほんとに見つからないのです。
Adobeのデベロッパーセンターの内容は素人にはさっぱりわからんし。

で、結局、力技でやりました。

Read All »


Posted by sponge design on 10/6, 2010 :: Categories 仕事
Tags ::


効率的なサイト制作のための
Dreamweaverの教科書

comments: 0

効率的なサイト制作のためのDreamweaverの教科書」読了。
Dreamweaver(CS4/5)の機能説明と、実際にサンプルサイトを制作する手順説明がメインコンテンツです。

DreamweaverはMXから使用していますが、当時はイマイチ使い勝手が良くなった機能や、使い方がよくわからなかったままになっている機能等は、CS5を使っている今もそのまま使っていなかったので、知らないことがけっこうありました。こんなに便利になってたんだなぁと。
(考えてみればDreamweaverの解説書買ったのもMX使ってたとき以来です。)

前記事にも書きましたが、Backlogのバージョン管理機能(Subversion)を使いたくてDreamweaverの設定方法を知りたかったのですが、本書にSubversionの解説は1ページほどしかなかったものの、画像があったのですっきり解決。

後半のサイト制作の手順については、意外にも私がやってる流れ・方法とあまり違いがなかったので安心しました。
(私はCSSもhtmlも外部エディタもしくはコードビューで手打ちですが、制作の流れやCSSの設定方法などはほぼ同じでした)
ずっとネットで調べた方法&自己流でかつ同じ方法で2年以上やっているし、そろそろ古びてきたんじゃないかと思っていましたが、意外にそうでもないのかなー。
それとも、CSSハックについてもあまりつっこまれていなかった点から考えるに、やはり、CSSレイアウトを始めたばかりの人向けに基本に忠実に説明している、ということなのかもしれません。

ところで、yuga.jsが紹介されてたのも嬉しかったなぁー。
私も好きでよく使わせていただいています。

アマゾンの書評にもありますが、ある程度実務で使っている人でもリファレンスとして使えるし、HTML5やiPhone/iPadなどに対応した最新のトピックもあり、これからDreamweaverを使おうという人でもサイト制作の手順を見ながら実際に習得することもできる、対象が広範囲でありながら使い勝手の良い本だと思います。
また、制作後のブラウザでのチェック方法、Zen-Codingなどの拡張機能などにも言及されていて、確かに「Dreamweaverの解説書」ではなく「効率的なサイト制作のための解説書」だと思いました。


Posted by sponge design on 9/19, 2010 :: Categories


Backlogでバージョン管理 試用中

comments: 0

もうだいぶ前になりますか、Dropboxのバージョン管理機能が30日間限定になって以来、とりあえずはファイルを別名保存にしていたものの…やっぱりスマートじゃない。

以前勤めていた会社ではVisual SourceSafeを使っていたのだけれども、サーバ管理者にまかせっぱなしで全然わかってなかった。
自分のMacでバージョン管理するにはどうしたらいいかちょっと調べてみて、Version Cueや、SubversionのGUIクライアントVersionsを使ってみたものの、なんだか直感でうまく使えないというか。
できればローカルで管理したかったので、うまくVersion Cueを使えたら言うことなかったんだけど、何せ動作が重すぎ。
(Version CueはCS5からなくなったらしい。今ググって知った)

ところで、バージョン管理と合わせてプロジェクト共有のツールも以前から探していて、たまたま知ったBacklogにバージョン管理機能があるではないですか。
使い方は、Dreamweaver CS5にある「サイト設定」→「バージョンコントロール」でBacklogのリポジトリパスを設定するだけ。かんたーん。

dreamweaverサイト設定

backlogの画面

ちょうど始まるプロジェクトがあったので、クライアントにもBacklogの試用をお願いしてみた。
とはいえ、私とクライアント2人だけでやりとりしていた小プロジェクトだったので、連絡事項などはいちいち先方にBacklogにログインしてもらうお手間をかけさせるよりは、ふつーにメールを使った方が効率は良かった。
でも、先方メールサーバーの容量制限でファイル転送サービスを使ってらっしゃったので、Backlogでファイルのやりとりができただけでもひと手間減ったかな、とは思った。

無料プランだったので諸々制限あるものの、けっこう使えるな、という印象で、有料プランを検討中。

ちなみに、バージョン管理につきもののファイル比較をDreamweaver CS5でするには、以下のページを参考にさせていただき設定した。
http://dreamweaver.cc/blog/archives/post_35.html

↑の本は購入して2/3ぐらい読んだところ。終わったらまた感想書きます。


Posted by sponge design on 9/16, 2010 :: Categories いろいろ


続・CSS Nite redux, Vol.1 に参加してきました

comments: 0

Google Analyticsのメニューや用語を知らなかったら、ついて行くのが厳しそうな内容でした。
事前に案内メールで「大内さんの著書を事前に目を通されることをオススメします。」とありましたが、まさに。

私は、ちょっとフィルタ使ったり、自分なりに指標を見てはちょこちょこ改善してみたり…というようなことを月に1〜2回やる程度のユーザーですが、「できる100ワザ Google Analytics 増補改訂版」を1月に購入する前は、Google Analyticsと解析についての本を読んで「なるほどなー」とは思えても、いざ自分のサイトとなると、さて、何しましょう、という感じで数字に惑わされまくってました。

今回のセミナーに参加してみて、相変わらず惑わされてるなーと改めて思ったのが、

第1部「指標によってサイトは変わる」

1.新規とリピーター

リピーターといっても、初めて来た日に2回目以降の訪問があったら新規ユーザーのようなもの

2.離脱時にユーザーは意識していない

→ こちらが希望する経路内での離脱以外は、有効な指標として意識する必要はないのではないか?

の2点。大変参考になりました。

アドバンスセグメント/カスタムレポートの説明後、GAではデフォルトで出ない月次レポートをカスタムレポートで作る方法を教えていただき「おおー」となり、1部が終了。
カスタムレポートを極めたいものです。

第2部「ユーザー行動を明確にする設定」

トラッキングコードの説明や目標設定方法、キャンペーン変数についての説明は確認する意味で聞いていましたが、それをこう使う!のところでまたメモメモ。

1.twitterクライアントから流入するとGAはtwitterからだと判別できない

→ キャンペーン変数を設定した短縮URLを貼る

2.メールからの流入計測

a.キャンペーン変数を使う
→ よく聞く方法

b.簡易パラメーター+ サイト内検索機能を使う
→ URLの最後に「?mm=xxx」を追加して、mmをサイト内検索のパラメータとして登録
(※mm/xxxは任意の文字列)

なるほどっ!
参照元は出ないけど、自分はメールだとわかっているので問題なしですね。
(2010-09-08追記:あとで上記の著書を読み直したらどちらも書いてありました… 最初に読んだときにbの意味がわかってなかったのですな、たぶん)

その他カスタム変数の使い方やサブドメイン/別ドメイン間での計測についての説明があり、2部終了。

第3部「Google Analytics分析とセグメント」

セグメント設定のポイント説明の後、待ってましたの実践編です。

CSS Nite LP, Disk 10」でもアユダンテの安川氏と一緒に実在のサイトを解析してらっしゃいましたが、今回は大内氏のクライアント2社が提供してくださった数値を元に質問が出され、セミナー参加者が考える形式です。

1社目の方は隣の方と答え合わせをしても割と意見が合って正解にも近かったんですが、2社目が全然あかんかった(笑)。
自分は思い込みが強いんだなとよくわかりました。
もっとユーザーの気持ちに寄り添わないと…。

LP10ではアユダンテのお2人が解析&改善案を出していたので、当たり前ですが今回より内容はずっと専門的かつ難しかったです。
そして本と同じで、私は聞いていて感心したり納得したりしていたのですが、実践では本当にまだまだだということが身にしみました。

しかし、最後に鷹野氏がおっしゃっていた「探偵みたい」に同感。
面白いですね、解析は。

CSS Nite redux, Vol.1


Posted by sponge design on 9/6, 2010 :: Categories セミナー・勉強会など