お知らせです。
今年に入って数ヶ月の間、コメント欄がロシア語のスパムで
荒れてしまいましたので、コメントの投稿に
reCAPTCHA認証を追加いたしました。
こちらで少し様子をみたいと思います。
崩れた英数字が表示されていますので、
下のフィールドに文字列を入力した後、コメントの投稿をお願いいたします。
＊文字列が読みにくい時は入力フィールド右側のボタンを利用できます＊
- 再読み込みボタン
・・・文字列が更新されます。 - 音声ボタン
・・・文字列を読み上げます。
お知らせです。
今年に入って数ヶ月の間、コメント欄がロシア語のスパムで
荒れてしまいましたので、コメントの投稿に
reCAPTCHA認証を追加いたしました。
こちらで少し様子をみたいと思います。
崩れた英数字が表示されていますので、
下のフィールドに文字列を入力した後、コメントの投稿をお願いいたします。
＊文字列が読みにくい時は入力フィールド右側のボタンを利用できます＊
・・・文字列が更新されます。・・・文字列を読み上げます。HPって情報の質や商品、サービスが大事だよね。どんなにデザインが素晴らしかったとしても、中身が空っぽだったら誰も見ないし、もし商品を買ってくれてもサービスが悪かったらリピーターにはなってくれないもんね。みたいな話をしたんですね、その時のシステムの方の一言。
「デザインの素晴らしさは検索に反映されないしねぇ」
この一言を聞いて「たしかに！」と思ったのですね。
googleさんで画像検索のサービスもありますが、でもこれは画像であって、goodなデザインは検索されないし。
てことは、どんなにいいデザインでも、検索でヒットしないから必要無い..？？それじゃ、デザイナーが一生懸命作ってるデザインて無駄なのかな？
と一瞬脳裏を過ぎつつ、イヤイヤそんなことない。だって例えば、どんなにいい事が書いてるHPでも、フォントサイズ10pxの行間0なんてものはきっと誰も読まないわ！。と思い直したのです。
だから、やっぱり、コーダーは意味のあるコーディングをして、デザイナーは訪れた人のハートをワシ掴みにするデザインをして、HPのオーナーは情報の質を高める。これできっとみんなハッピーだわ！と思いました。
人によってマスクのかけ方って違いますよね。頂いたデータを見ては「ほうほう。こんな方法があるのか」とチラ見
したりしています。
で。複雑な形をマスクする時はどうしてもパスも複雑になり時間かかるわっ、めんどいわっという状態になります。自動選択ツールを使っていらない部分を削除する方法もあるのですが、輪郭がガビガビになる時もありNO
で、それをを防ぐために輪郭をぼかしたりもするんですがぼかしの調節が難しかったりします。しかもこの方法だと後から修正ができないので一から何度もやり直すこともあるんですね。ただでさえ作業が遅いのにここに時間をかけるわけにいかない！ここはなんとかスピードアップを目指したいところ
そしたら、なんともgoodな記事を発見！それがFireworksだけでできる、カンタンきれいな画像切り抜き術 | Fireworksマニアです。FWを使って4種類のマスクの方法を紹介しています。特に私がヒットだったのが、
--
3.わざわざ手で書かずに、カンタンに切り抜き用パスを作成する
--
「自動選択ツール」でいらない部分を選択→「選択範囲の反転」→「マーキーをパスに変換」で、パスができるので後はマスクするだけ。しかもパスデータなので後から修正もできちゃう。超便利！超楽ちん！（詳しくはリンク先をご覧下さい）
これを知っているのと知らないのでは作業効率が全然違うと思うんです。さらに「4.色の差の少ない画像のときにもカンタンに切り抜き用パスを作りたい！」も便利ですね。今度からマネッコしよう思います。
私は制作なので、お仕事＝ディレクターさんから仕事もらう！なんですが、でもディレクターさんがどんなお仕事をしているのか？て実はよく知らないんですね。制作以外全部とは聞きますが、だから制作以外ってなんだよっ！という。今回フレームワークを作る機会があり、参考にしたサイトがディレクターという仕事を絡めつつwebの仕事についても書いてあってとても面白かったのでご紹介しますね。（読んだのは作業が一段落したあとですよ！）
あるプロジェクトの立案からリリースまで（前編）
あるプロジェクトの立案からリリースまで（後編）
で。ディレクターさんがどんなお仕事をしているのか？は上記を読むとだいたい書いてあって、一言に「制作以外全部」とはいいつつ・・・こんなにやることあるの？とビックリしちゃいました
--
■まずはビジネスモデルの理解から
■プロモーション施策の設定
■WEBにおいての案件定義
■ベンチマーク調査
■検索マーケット調査
■サイトコンセプト設定
■コンテンツマップ作成
■ディレクトリマップ作成
■ワイヤーフレーム作成
■素材集め
■デザインテーマ定義
■成果物の監修
■クライアントの要望を反映or説得
■ディレクターチェック
■テストアップ+クライアントチェック
■リリース
--
私が関わっているのは「デザインテーマ定義」の部分なのでほんの一部ですね。それにしても素材集めやディレクトリマップ作成もディレクターさんのお仕事なんですね。考えてみればそりゃそうか、という気もしますが。。。
このブログを読んでいると、このディレクターさんはお客さんや制作を大切にしてるんだなぁ。というのが伝わってきます。そして堅苦しい内容でも易しく書いてくれているので読んでいてとても楽しいです
個人的に下記のリンクもおすすめです。
WEBディレクターの「いっぱい仕事してる。」は結構危険
ディレクターは「御輿の上の人」だと思う
クライアントの無茶振りをデザイナーにうまく伝える方法
「面白い！」と"思わせる人"こそディレクター
サイトは見た目から作ってはいけない
で、今まで私の作ってきたファイルはどうだったかなぁ、と考えると・・・。1pxなんて可愛いもので5pxとかズレてたかも～
と、怖くなりました。
「webデザインは1pxにどこまでこだわれるかなんだよ」って聞いたことありますが、1pxにこだわるのは見た目の美しさだけではなく、コーディングのしやすさも関係あるんだなぁ。と思ったのでした。気をつけようっと
解決方法
FWのウィンドウを最小化する。※終了ではない
これに気づく前はいちいち終了してたんですが、この方法でほとんどの場合直ります。ショートカットキーが効かなくなった時もこの方法でたまーに直ることがありますので、終了する前に試してみるといいかもです
構築のスピードとクオリティをあげる、本気のワイヤーフレームの書き方
--
（制作手順抜粋）
要素を洗い出して、書き出す。
コンテンツマップを作成し、各コンテンツにも優先度をつける。
とりあえずワイヤー案を手で書いてみる。
パワポで清書してみる。
可能な限り原稿も入れ込んで、テンプレートパターン、および想定する全てのレイアウトパターンをワイヤー化
--
「誰が読んでも何の事を言っているのかわかる一般用語で名称をつけます。」「クライアントとも共有しやすいパワーポイントが大のお気に入りで」など、なるほど！と思う点がいくつもありました。
制作としては、ディレクターさんが一生懸命考えて作ってくれたワイヤーフレームと分かっていても、矛盾している所があると「え～！どうしたらいいんだぁ
」ってなったりするんですね。でも、自分でワイヤーフレーム作れ！て言われても作れる自信はないという・・・。もし作る機会があったらコレを参考に作ってみたいな、と思いました。
デザインスキルを上げるには実践あるのみ！あるのみ！！でも、そんなに都合よくお仕事ってなかったりしますよね。そんな時にやってみるといいかもしれないのがこちらみんなのクリエイティブエージェンシー：C-teamです。
--
C-teamは、「クラウドソーシング（群集にアウトソースする）」という手法を使った、ＷＥＢ上の新しいクリエイティブエージェンシーです。誰もがクリエイターとなって、クライアントの広告キャンペーンに参加できます。
--
とのことで、サイトに登録すれば企業が募集したバナー制作に参加できます。うまくすると採用→ポイントGET!→お小遣い稼ぎ成功！となります。ちなみにポイントGET!には二種あって、企業がバナーを買取るタイプと掲載終了後にクリック率ランキングによってポイントが決まるタイプがあります。
個人的にはお小遣いどうでもよくて、実践練習と自分の腕試しになるのがいいな。と思いました。会社員なので実際にやると怒られるのでやらないですが、おもしろいサービスですね
TwitterやFacebookで共有されたリンクが検索順位に直接影響する――グーグルとBingが明言
--
（一部抜粋）
グーグルとBingは、TwitterやFacebookで共有されたリンクが検索順位に直接影響することを認めた。リンクグラフに与えるであろう2次的なプラス効果とは別に影響があるということだ。
--
とのことです。ツイッターやFacebookで紹介されればアクセル数が上がるだろうなぁ、とは思っていたものの検索のランキングにまで影響をおよぼすとは！！2ページ目にはソーシャルメディアの中でもどんなリンクに価値があるのかの解説（記者の推測）が載っています。
ここでも詳しく解説されています。
SEO終了のお知らせ
--
（一部抜粋）
検索エンジンは大量のスパムに悩まされているそうです。
（省略）
ソーシャルメディア上では、実質上、スパムはできません。スパム的な行動をすると、周囲から孤立してしまうからです。
--
スパム対策になるのでは？ということでソーシャルメディアが注目されているようですね。
これからの案件では、ツイッターやFacebookのいいね！ボタンの導入が増えるかもしれないなぁ、と思いました。
auがソフトバンク批判CM お父さん犬や電波の悪さを指摘 - ネタりか
--
お父さん犬のような白い犬が登場
繋がらないスマートフォンなんて......
AndroidはFLASHが動く
スマートフォンと携帯電話の2個持ちはやめよう
--
見出しを見ただけでソフトバンクとiPhoneの批判だとわかりますね。でも、確かに電波悪いし、flash動かないし・・・。ただ、個人的にはお父さんをバカにしている感じは好きじゃないですねー
]]>
FWで「GIFすべての色を割り付け」をすると画像が汚く書きだされることってありますよね
フォトショを使えばキレイに書き出せますが、せっかくスライスを切ったのにフォトショで書き出し直すなんて、作業増えるわっ！時間かかるわっ！面倒だわっ！ということでFWでGIFをキレイに書き出す方法について
-----------
そのもそも「GIFすべての色を割り付け」で書きだそうとしてるのに、どうして「GIFアダプティブ」になるの？？
Adobe Fireworks CS4 * カラーパレットの選択より
--
●すべての色を割り付け
画像に使用されているカラーすべてを含むパレットです。このパレットは、カラー数が256色以下の画像でのみ使用できます。それ以外の場合、パレットは割り付けに切り替わります。
--
とのことなので、256色を超えると自動的にアダプティブになるようです。
--
●アダプティブ
ドキュメントで実際に使用されているカラーを基に作成されるカスタムパレットです。一般に、最も画質が高くなります。
--
「一般に、最も画質が高くなります。」と書いてありますが、結局アダプティブの減色が下手だから画像がガビガビになるようです。本来なら256色を超えた時点で減色するんでJPEGで書き出すべきなのかもですが、規定でGIFと決まっている場合もあるので、そんな時は頑張ってGIFで書き出すしかないですねー。困る！
-----------
解決方法
FWアダプティブの減色が下手なら、自分でパレットを制作して減色を制御する。
アダプティブが色を減らしすぎなのが問題なので、必要な色を増やす必要があります。この時スポイトツールで一色ずつ増やしてもいいのですが、面倒なので。こんな方法～
書き出したい画像の色を「GIFすべての色を割り付け」で、256色ぎりぎりまでに読み込みます。
読み込んだら、右上にある「オプション」から「パレット」の保存を選択。オリジナルのパレットが完成。
あとは、新しくスライスを作って、「オプション」から「パレットの読み込み」を選択。さきほど作ったパレットを選択すればOKです。
ちなみに、JPEG品質100、GIF減色汚い（アダプティブ）と今回作ったGIFパレットを並べてみました。
断然GIFパレットがキレイだと思うんですJPEG100と比べてもそんしょくないような。。。
一つパレットを作ってしまえば、（同じボタン・色なら）いっぺんに最適化できるので楽ちんですね。さらにパレットを共有すれば複数のPCで同じ品質の書き出しができます。
パレットは携帯画像の時など、色数を減らす作業の時にも便利なんだそうです。
ちなみにCS4の場合は、FW→別名保存→PSD形式選択。フォトショで開くとスライスを保持したまま開くことができるそうです。いいなぁ。
ただ、この方法は何度も使うボタンのようなアイテムには有効ですが、1つしか無いアイテムの書き出しには向いてないですよね。そういう時はやっぱりフォトショで書き出した方が速そうです。
実はほとんどOさんからの受け売りです(若干変えてますが)。
Oさんありがとうございましたｍ（_ _）ｍ
ちょっと調べ物をしていた時に発見したサイトです
どこのオサレ系お店のサイトかと思ったら、建設関係の会社みたいですね。ビックリ！
htmlのTOPもあります。
株式会社マイティー（html）
ハウス食品のページには「音声で読み上げる」ボタンがあるようです
音声ブラウザもこんな感じで読み上げるんでしょうかね？？
こちらの会社のサービスのようです。
ウェブアクセシビリティ支援音声読み上げサービスの第一人者 リードスピーカー・ジャパン
Sewing Kit from shinolab on Vimeo.
個人的なことですが、研究室の後輩たちが頑張っているのでご紹介。
「第2回むつデジタル映像フェスティバル」でなにやらすごい賞を頂いたようです。それにしても後輩たち年々レベル上がっていてビックリしちゃいますね。
BIRD BARON'S STORY from Mutsu Fes for Digital Moving Ima on Vimeo.
前年度は、私の友人萩ちゃんも賞を頂きました。※受賞に関連して声をフィスティバル側がつけてくださいました。元々は声無しのflashによるインタラクティブアニメーションでした。この授賞式は（関係ない）私も一緒にむつ市まで見てきましたよ！こちらのリンクが元々の作品。
BIRD BARON'S STORY
他にも、いろいろ活動をしているようなのでもし良かったら覗いてみてください。
SHINOLAB.COM // 東北工業大学 篠原研究室
webページ全体のキャプチャがほしい。さらにPNGだともっと嬉しいなんて時ありますよね。
今日はなんとも便利なChrome拡張機能を発見したのでご紹介。
Awesome Screenshot: キャプチャーと注釈 - という拡張機能なんですが、これが超便利なのです
ページ全体のキャプチャが撮れてPNGというのはもちろん。撮ったキャプチャには文字や矢印、図形の追加や、切り抜き、さらにはツイッターなどでの共有もできちゃったりします。
すごいですね
ディレクターさんが指示を出すときに便利かもしれませんね。
個人的にはページ全体のキャプチャが撮れて、PNGなだけでも文句無し大満足です
こちらのブログでとても詳しく紹介されていまーす
スクリーンショットを撮るChromeエクステンションはAwesome Screenshotが一番良かった - かちびと.net