Webutubutu!

WEB/SEO関連文献紹介:7

2012-02-03T08:25:00.000+09:00

前回に引き続きなのですが...。面白そうな文献を見つけましたので。今回も本文が読めるものがあります。
特にお勧めなのは「検索エンジン最適化の有効性に関する考察」というタイトルの論文です。

前提

GeNiiで検索した内容を記事にしています。

GeNiiについては資料の探し方という記事という記事を参考にどうぞ。

凡例

以下に凡例を記載します。

本文を読める文献は【本文】と記載
本文データ無しや会員のみ閲覧可能は【抄録】と記載
本文も抄録も無しは【書誌事項のみ】と記載

一覧

ファクターモデルによるインターネット株式掲示板の投稿と株式リターンの分析【抄録】
諏訪博彦;梅原英一;太田敏澄情報処理学会論文誌 53(1), 117-125, 2012-01-15

抄録によるとYahoo!株式掲示板を舞台にした研究のようです。
掲示板に書き込まれる内容を「人々の意見・気持ち」と捉え、これらを利用して投資判断を支援する事が出来るかどうかを論じています。具体的には、「Yahoo!株式掲示板の投稿数および投稿内容が株式リターンと関係しているか明らかにする.」とのこと。抄録内に書かれた結論では、研究に投稿数や強気指数を用いた上で「強気指数は株価リターンと関係している可能性があると考える.」と結んでいます。
興味のある方は原文を取り寄せてみて見ると良いかもしれませんね。
検索エンジンのヒット数に対する信頼性の検証【本文】
山名早人 2010-02-01

本文が読めます。こちらは2009年度の修士論文です。
数式を用いていますので、私には全部を理解できませんが...。GoogleのみならずYahoo!とBingも調査対象にしています。ヒット件数の違いを調査する為に、いくつかの条件を設定して数値やグラフを示しています。
通常SEOではヒット数にはそれほど意味がありませんが、ヒット数の変動に着目して調べた内容には得る物があるかもしれません。
外出行動前のユーザへの情報提供を目的としたWebからのアドバイス文抽出【抄録】
小澤俊介;岡本昌之;長野伸一;長健太;松原茂樹情報処理学会論文誌 53(1) 105-116 2012-01-15

「外出行動前のユーザに有用な情報を提供することを目的に,事前に入手すると役立つアドバイスをWebから獲得する手法を提案する.」とのこと。
面白そうだと思ったのは「アドバイス文か否か,および,アドバイス文が外出行動前に参照しておきたいものか否かを機械学習を用いて判定する」という部分です。WEB上に存在する情報を検索する際に、その文章がアドバイス的な文章かどうかを判断し、且つその有効性を機会で判定しようというのですから。これができるなら、コンテクストを機械的に理解したうえでユーザーの状態を考慮して、最適な結果を返せるのかもしれません。
1-F-10 検索エンジン最適化手法の検証(ネットワーク技術) 【本文】
袁方;大屋隆生日本オペレーションズ・リサーチ学会秋季研究発表会アブストラクト集 2009 134-135 2009-09-09

古めですし、2ページしかありません。
しかし内容が...よくこれを発表したなと思ってしました。本文では「手法1:目的キーワードの分析」「手法2:キーワードに沿ったページの構成」「手法3:リンクの作成」「手法4:HTMLによる最適化」と実験で行った内容を明示。まとめの部分では「今回の例では、SEO手法の中では、複数個のキーワードの設定及びhタグの使用が特に効果的であった」と記載があります。本文下部のグラフを見れば、内容の精度は推して知るべしでしょう。
検索エンジン最適化の有効性に関する考察【本文】
菱沼千明;山口義昭東京工科大学研究報告 3 3-13 2008-03

こちらは上記より更に古く2008年。しかし、かなり読み応えがあります。
SEOの観点から調査っており、全体的に詳細で具体的な内容です。以下に「検証項目」と題された部分を挙げますが、これを見ていただければ本文を読みたくなるでしょう。

下記の21種類のSEO項目を検証の対象とする。

(1)検索語句の記述位置
1.TITLEタグ内
2.BODYタグ内
3.META-keywordsタグ内
4.META-description内タグ内
5.ページ内出現回数
6.検索語句占有率

(2)タイトルタグについて
7.タイトルタグ内の文字の有無
8.タイトルタグ内の文字列長

(3)リンク数について
9.ページ内のリンク数
10.アンカーテキスト内の検索語句数

(4)強調文字
11.H1タグの利用数

(5)イメージファイルについて
12.イメージファイルの数
13.検索語句を含むALTタグ数

(6)各種タグの利用
14.SCRIPTタグ
15.TABLEタグ
16.FRAMEタグ
17.FORMタグ

(7)プラグインなどの利用
18.CSS
19.Flash
20.Javaアプレット

(8)外的要因
外部のWebページからの参照度合いを示すGoogle PageRankとの関連しについても検証する

本文を読む場合はリンク先にある「CiNii 論文PDF - オープンアクセス」からどうぞ。

結び

今回は数は少ないですが、面白そうな論文を見つけられたかと思います。

興味のある方は、是非本文に当たってみてください。

文献紹介：「ユーザの心理的距離に則したWebページ間の新しい距離の定義」

2012-02-01T00:56:00.001+09:00

え〜、時間が取れずブログの移転計画が延び延びになっている今日この頃。
こんな微妙なタイミングではありますが、久々に記事を一つ。WEB/SEO関連文献紹介の番外編で、気まぐれにランダムサーファーモデルで調べて見つけた古い論文についてです。

なお、パシフィカスさんの記事「クリックされる重要なリンクが評価されるリーズナブルサーファー・モデルとは」を読んだのがきっかけで、当初はリーズナブルサーファー・モデルで検索し、その流れで見つけた論文です。

「ユーザの心理的距離に則したWebページ間の新しい距離の定義(WWW)」

GeNiiで検索して見つけたのが以下の論文です。

ユーザの心理的距離に則したWebページ間の新しい距離の定義(WWW)
松尾豊, 大澤幸生, 石塚満情報処理学会論文誌 44(1), 88-94, 2003-01-15

2003年の論文ですが、全文が読めます。読む場合は上記書名でリンクしているページの「この論文を読む／探す」の「CiNii論文PDF-オープンアクセス」をクリックしてください。

なお、私がSEOを学び始めて日が浅いので上記論文の内容が知られているのかいないのか、一般的なのか一般的でないのかなどがわかりません。
もしも書くまでもない内容でしたら、読み飛ばしていただければと思います。

概要

「ユーザの心理的距離に則したWebページ間の新しい距離の定義(WWW)」を読んでみましたが...。対数を理解していないので、数値の算出がよくわかりませんでした。もちろん数値意外の部分にも分かりにくい部分はありますが。

あまり自信が無いのですが、ざっくり内容を書き出すと。

クリック数ではなく標準クリック数を定義
標準クリック数の定義の元になっているのはランダムサーファーモデル
あるページ内の発リンクの数はユーザーの心理的距離に影響を与える
発リンクが少ない程、リンク先のページへの心理的距離が短くなる
発リンクが多い程、リンク先のページへの心理的距離が遠くなる
発リンクが多い程、一般的なページと考える事が出来る
ユーザーの「理解のしやすさ」は標準クリックと相関関係がある

...箇条書きにすると、どれほど内容を理解しているのか怪しくなってきました。

しかし論文のまとめの部分で、

本論文では、非常に簡単な定義により、ユーザーの距離感をより的確に反映するページ間の新しい距離測度として標準クリックを提案した。さらに、ユーザーのホームページからあるホームページまでの標準クリック数が、ホームページの理解のしやすさ、得られる情報量などとの相関関係がある事を示した。

とあります。このまとめ部分を読めば、より正確に論文の概要がお分かりいただけると思います。

標準クリック

明らかにキーとなる概念なのに、数学的に理解できていません。

が、下記の文章でイメージは掴めます。

平均的なページはページ内に7つのリンクを持つと報告されているので、logの底nを7とする。このように定義された距離の単位を標準クリックと呼ぶ。

なお、

最近の調査では、平均的なページは1つの外部リンクと4つの内部リンクを持つという報告もされている。この7という数字は便宜的なものであり、実際にはeや2、10などの値をとってもかまわない。

とあります。基準を設定し、基準からの相対的評価で判断するということでしょう。
ちなみに、平均的なページのリンク云々の元情報が気になる方もいるかと思いますが、しっかりと参考文献として本文末尾に記載されています。

15)Murray, B. and Moore, A.: Sizing the INternet, white paper, Cyveillance, Inc(2000) http://www.cyveillance.com

この論文はPDFで公開されており、以下のリンクから見る事ができます。
http://www.cs.toronto.edu/~leehyun/papers/Sizing_the_Internet.pdf

発リンクの意義

SEOの情報は少しは仕入れてはいますが...。複数の発リンクによってリンクジュースやオーソリティなどの価値が流れるのは、単純にリンクが設置されているからだと考えていました。
つまりは、物理的（といっていいのかどうか）に道ができてるから流れるのが当たり前、といったイメージです。

しかし発リンクの数がユーザーの心理的距離に影響を与え、ユーザーが得らてる情報量の差をも算出できるのであれば、発リンクの意義は前述のような単純さではなくなります。

発リンクという行為はページ制作者の意図を表しますが、同時にユーザーにも影響を与えるという視点。ユーザーについて考える事と発リンクを考える事を、より結びつけて考える事ができそうです。いままでこういう理解の仕方はしていませんでしたから、わりとしっくり来る感じです。

結び

今回の記事の元になった論文は2003年の論文です。また、「仕組みを解き明かす」ではなく「仕組みを提案する」内容です。実際にgoogleやbingなどの検索エンジンがこう考えているといった内容ではありませんので、お間違いの無いように。

とはいえ、私個人としては「Webページ間の距離」という今まで考えていなかった視点を得られました。

最後に、内容的に興味を持たれる方がいるかなと思う部分を引用して締めとします。

たとえば、Web上でコニュニティを発見する際に、一般的な話題が含まれやすい事が報告されているが、標準クリック数を用いれば、一般的な話題のページは、多くのリンクを持つため遠くにあると考えることができ、除去する事ことができる。
また、リンク先のページを反復的に探索するアルゴリズムは多く用いられるが、クリック数で閥値を決めるのではなく標準クリック数で決めるべきであろう。数クリック以内という基準では、非常に多くのページを取ってきてしまうかもしれないし、内容を何段にもわたって書いてあるページに対応できない。標準クリック数を用いれば、「もしリンク数が少ないなら探索を続け、リンク数が多ければやめる」という実用的な方策の根拠となる。

追記

冒頭にも述べましたが、私の理解が間違っている可能性も大です。違うようでしたら、コメント等でご指摘いただけるとありがたいです。

Bee - Toy digital 8mm movieを買ってみた

2012-01-08T02:38:00.002+09:00

先日のワールドビジネスサテライトで紹介されていた「Bee」を衝動買いしちゃいました。もともと文具などのモノが好きなのと、年始の浮かれ気分を少しは味わいたくて...。

※2012.1.11 試し撮り追加
※2012.1.14 追記

Beeとは

FUUVIという会社がリリースした動画撮影用の機器です。「Toy digital 8mm movie」というコピーが表すように、コンセプトは8mmムービーカメラで撮影した様な動画をとること。形も8mmカメラをイメージした形をしています。

詳細は専用サイトでどうぞ。サンプル動画もあります。ちなみに静止画も撮影できます。

Bee - Toy digital 8mm movie

感想

正直な所、意図したはずの画質の荒さがあまりいい方向に出ていない感じがします。撮影しただけの動画(.AVI)をみると、ノイズ的な荒さではなく単純にデジタルの汚さが強いかなと。とはいえ、帰り道などに適当にまわしたので環境が悪かったせいだとも思いますが。

音声も入りますが仕様では「ノイズ入り音声」とあり、音が環境音なのかノイズ音なのかちょっと微妙に感じる事もありそうです。

ファインダーが付いていますが、コレがかなりの曲者です。トイカメラなので厳密な見え方は期待していませんでしたが、なんだか縦横が二倍ぐらい広いイメージです。つまり、ファインダーに人の顔をおさめると、実際には首どころか胸の辺りまで写る感じです。ここまではいかなくとも、本物の8mmってかなり視野率低かったんですかね...。

それでもいいかも

不満点ばかり上げてますが、そこが回り回っていいかなと思っています。

iPhoneのカメラアプリなどでノスタルジー感溢れるムービーを撮る事もできますが、綺麗に撮影できすぎます。色にしろ、画質にしろ、構図にしろ。わりと思いどうりです。ですがBeeはかなり不便な分、偶然が入り込みます。正確でないだけに、モノの移り方が意図しない方向で出てきます。この点はまさにトイカメラの楽しさと言えるでしょう。

結論としてはトイである以上、トイとしての楽しみ方でいいのかなと。個人的にはサイトを構成する彩りに使えればと思ってはいますが。ちなみに、付属のストラップが結構可愛らしくいい感じです。

未解決の点（※解決済み）

私の購入したものに固有の問題かもしれませんが、恐ろしい事に水平がとれていません。三脚にのせて水準器で水平を出して撮影しても左に傾きます。いや、これはトイとかそういう解釈でも厳しい。

~~現在、発売元のFUUVIさんに不良品なのかどうか問い合わせ中です。返答あり次第記事を更新する予定です。~~

2012.1.14
FUUVIさんより返答があり、構造上厳密な調整はできないそうで。不良品とは言えません。ただ、あまりにもひどい場合は見てもらえるそうです。もちろん状況や状態（三脚なしで水平だせないのは当然ですし）まずは問い合わせて見るべきでしょう。
私の場合は郵送で送り状態を確認してもらった上で、動作確認済みの商品と交換となりました。手元に来たBeeは以前と比べて、かなり水平が取れてます。

試し撮り

帰り道に撮影した適当ムービーを繋げて、最初と最後に文字入れてみました。画質等はいじってません。音もそのままです。

test movie 01

地下鉄の駅の中のエレベータと夕方の空。暗めでも明るいレンズなので結構撮れます。

test movie 02

分かる人には分かるかもしれない某線の電車。目に当てて構図を確認せず、腰の辺りに構えて撮影です。...見た目に怪しかったかもしれません。

結び

一眼デジタルカメラで動画を撮影するよりは、気分的に楽でした。周りから見たらそれなりに怪しそうですが。撮影している本人は気楽に楽しいですね。

なお、大阪（梅田近辺）で購入する場合ですが、ヨドバシカメラや茶屋町のLOFTでは取り扱いがありませんでした。大阪駅地下の「八百富写真機店」は取り扱いをしていますのでそこで購入しました。microSDカードは付属してませんので、別途購入が必須です。

Eye-FiとiOS5のiPad（初代）

2011-12-27T04:33:00.001+09:00

Eye-FiとiOS5のiPad（初代）の組合せに付いて。基本的にソフトはアップデートしていくので、問題は無いようです。

Eye-FiとiOS5

Eye-Fiと組み合わせて使用しているのが初代iPadですが、先日iOS5にアップデートしました。
初代をiOS5にした直後、デフォルト以外の全てのアプリが起動しなくなりましたが再起動で解決。そしてEye-Fiです。

結論としては、不調になる事が多いですがなんとか使えます。

Eye-Fiの不調

まずはじめに。初代iPadでの話なので、iPad2だと問題は無いのかもしれません。

さて、不調とはiPadがEye-Fiを認識しにくくなった事です。

いままでも認識しない事はありましたが、Eye-Fiアプリを立ち上げてしばらく待ったりWi-Fiを再接続したりで大抵何とかなりました。が、アップデートしてからはつながらなくなる時がありました。

具体的に言えば、一度接続が切れると再接続ができない状態です。iPadの再起動やカメラの電源のONOFFでも長時間つながりませんでした。最初に接続が切れた後、何の拍子か撮影終了あたりに復活する事もあります。

対策

今の所対策がありません。

基本的にはiPad再起動とカメラの電源ONOFFぐらいしかできる事は無く、時間を空けて試してみるしかありません。とはいえカメラの電源を入れ直すだけでつながる事もあり、不安定感が増します。

もともと周囲の電波状態にもよるでしょうし一概に対処しにくいのですが...。同じ場所で撮影することが多いのであれば、最低限その場所では安定して接続できる方法を知りたい所です。

結び

便利な機器だけあって、Eye-Fiは手放せません。ファームウェアのアップデートなどで対処が可能であればよいのですが、現状直っていないので難しいのでしょう。

なお、Eye-Fiに付いては以下の記事も書いています。参考にご覧下さい。

WEB/SEO関連文献紹介:6

2011-12-23T02:25:00.002+09:00

WEBやSEOに関連する文献を紹介しているシリーズ第六弾。不人気企画ですが、めげずにいこうと思います。

前提

GeNiiで検索した内容を記事にしています。

GeNiiについては資料の探し方という記事という記事を参考にどうぞ。

凡例

以下に凡例を記載します。

本文を読める文献は【本文】と記載
本文データ無しや会員のみ閲覧可能は【抄録】と記載
本文も抄録も無しは【書誌事項のみ】と記載

今回は、タイトルや抄録などを見ながらコメントを書いてみました。中身が読めない論文がほとんどなので今までリスト的な作りでしたが、できる範囲で少々情報を増やせればと。

一覧

比較文集約に基づくエンティティ間の順序関係推定による補間エンティティの発見【抄録】
旭直人 , 山本岳洋 , 中村聡史 , 田中克己情報処理学会論文誌 52(12), 3527-3541, 2011-12-15

エンティティとは、weblioには『参照や関連付けを受けるデータや意味のまとまり』と言う意味。
抄録によれば、『本稿では特に,"この店よりはおいしくて,あの店よりはリーズナブルな店を見つけたい","2つの本の間にあてはまるような難しさを持つ本を見つけたい",といった,主観的評価における補間エンティティを発見する手法を提案する.』とのことです。
印象語をクエリとするリアクションに基づくウェブ情報検索【抄録】
莊司慶行 , 田中克己情報処理学会論文誌 52(12), 3515-3526, 2011-12-15

抄録によると『ウェブコミュニケーションデータを用いることで,「面白い」や「泣ける」などの印象語に基づいたウェブ情報検索を実現する.』との事。
どうやらクチコミやブログなどユーザーが発信しているリアクションを利用し『クエリとして入力可能にすることで,このような読み手の受ける印象による検索を可能にする』ようです。
日常物の利用情報を用いたコンテキストサーチ【抄録】
前川卓也 , 柳沢豊 , 櫻井保志 , 岸野泰恵 , 亀井剛次 , 岡留剛情報処理学会論文誌 52(12), 3504-3514, 2011-12-15

『提案手法は,センサで検知された日常物の利用の情報から自動的にクエリを作成することで,日常物を用いた行動に関するページを検索する.』とかかれています。
日々触れる機器自体が検索クエリの様な働きをし、関連情報を検索するようです。

可能なら、何かの機器の使い方に困った際に有効な検索手段となるかもしれません。マニュアルによくある「困った時は」の情報ですね。
視点を変えると、実際に特定の機器に関するコンテンツを作成する際に、「マニュアルの困った時は」を参照すれば得るものがあると思います。
映像に付与されたコメントを用いた登場人物が注目されるシーンの推定【抄録】
佃洸摂 , 中村聡史 , 山本岳洋 , 田中克己情報処理学会論文誌 52(12), 3471-3482, 2011-12-15

『視聴者の反応として映像の再生時刻に沿って付与されたコメントを用いて,映像に登場する人物が視聴者の注目を集めているシーンの推定と各シーンにおける各登場人物の活躍の度合いの推定を行う手法の提案をする.』とのこと。

実験にはニコニコ動画の映像を利用しています。コメント頼りではありますが、動画の内容を検索する新たな手段かもしれません。
地域コンテキストを考慮した動的な特徴空間に基づく地理情報例示検索【抄録】
加藤誠 , 大島裕明 , 小山聡 , 田中克己情報処理学会論文誌 52(12), 3448-3460, 2011-12-15

『地理情報例示検索では,よく知っている地域の例を与えることであまり知らない地域の地理オブジェクトを検索することが可能であり,検索対象地域に関して事前知識を必要としないことが大きな利点となる』とのこと。

類似していて身近な場所の特徴を利用し、馴染みの無い土地での検索活動を容易にする事ができるようです。ユーザーに属する主観的な要素を利用するということでしょうか。
文間関係認識に基づく賛成・反対意見の俯瞰【抄録】
水野淳太 , 渡邉陽太郎 , エリックニコルズ , 村上浩司 , 乾健太郎 , 松本裕治情報処理学会論文誌 52(12), 3408-3422, 2011-12-15

『検索された文について,まず,トピックに対する賛成意見であるのか,それとも反対意見であるのかを分類し,次に,賛成および反対する根拠を含むかどうかを認識し,それらを俯瞰的に示す』とのこと。

目をひいたのは『ウェブ上の実文に対して既存の含意関係認識を適用しても,その分類性能は限定的』という状況に対応した研究という点。制限を加えた実験環境だけではなく、現実に存在するインターネット上の雑多な文章に対しても有効な手法と位置づけています。
学習を必要としない自然言語文からの個人情報検知技術【抄録】
広瀬緑 , 吉浦裕　情報処理学会研究報告. CSEC, [コンピュータセキュリティ] 2011-CSEC-55(1), 1-8, 2011-11-28

『想起検知技術は,大量のサンプル文章を用いて学習を行う従来の検知手法とは異なり,学習のかわりに Web 検索を用いて個人情報が含まれることを検知する.』との事。SNSなどでの個人情報漏洩を防ぐ手法のようです。
ビデオ検索のためのMPEG-7 Video signatureのdirect-mapped cacheへの適用法の検討【抄録】
村林昇 , 吉田健一情報処理学会研究報告. グラフィクスとCAD研究会報告 2011-CG-145(2), 1-8, 2011-11-10

『ビデオ検索のための MPEG-7 video signatureをdirect-mapped cache への適用法を検討した.』との事。

著作権を無視してアップロードされた動画を、より効率よく性格に検出できるようです。詳細はわかりませんが、動画の検索手段も日々増えているということでしょうか。
説明からの用語検索のための緩和によるクエリ生成とページ中の位置を考慮した用語抽出【抄録】
木場由布子 , 湯本高行 , 新居学 , 高橋豐情報処理学会研究報告. データベース・システム研究会報告 2011-DBS-153(25), 1-8, 2011-10-27

『本手法では,Web を用いてユーザの説明からクエリを生成し,Web を用いて逆引きを行い用語を抽出した後,順引きを行い用語を検証する.』という内容。

少し目をひいいたのは『Web ページ中のタイトルから用語を優先的に抽出することが有効であることがわかった.』という点。
SEOにおいてはタイトルに目的のキーワードを入れる事が一般的ですし、SEOを全く意識しなくともタイトルには内容を表す言葉を入れます。実験の結果は順当だといえますし、むしろタイトルに用語が無い方が問題であるとも考えられるかと。
5.情報検索の理論【本文】
緑川信之図書館情報学研究,第6号　寄付講座「インターネット時代の情報資源活用」特集号,2011-3

図書館情報学からみた検索の考え方です。本文には情報がどういったものなのかが記述されています。情報を探している人の、調べる前と調べた後の知識状態の変化の差が情報の価値であるように書かれています。

結局のところユーザーの主観次第にはなってしまいますが、WEBで情報を発信する際に意識しなければいけない点でもあります。そのサイトやページを見たユーザーが何も得ないのであれば、そのページに価値を感じてはもらえませんから。
コーパス分析に基づく「～にくい」・「～づらい」表現の研究【本文】
金城克哉留学生教育 : 琉球大学留学生センター紀要,8,19-35,2011-03,琉球大学留学生センター

weblioによれば、コーパスとは『日本語や英語などをはじめとした自然言語の文書を大量に集めたもののことである。』だそうです。この論文は｢Yahoo!知恵袋データ」第1弾を利用しています。古くて残念。

面白いなと思ったのは、「〜にくい」や「〜しづらい」の前につく動詞が出現頻度別に一覧になっている点です。
たとえば、yahoo知恵袋内では「〜にくい」の１位は「する」です。おそらく「〜しにくい」といった具合でしょう。頻度が下がると「使う」や「食べる」や「目立つ」などが出てきますが、一番使われているのは抽象的な動詞ということになります。

なお、本文には「〜にくい」や「〜しづらい」の用例の差が詳細に書かれています。文末の参考文献を見ると同種のテーマがいくつも見受けられますし、研究テーマとしてはそれほどマイナーではないのかもしれません。

結び

本文が読めない論文がほとんどなので、多少無理のあるコメントになっています。ですが、本文が読める場合はある程度書ける反面、読む時間が結構必要となります。この方法を続けるべきか否か。

本文を読めるものに限定して点数を絞る手もありますが、本文が読める論文が少ないので頭打ちになりそうですし...。次回ではまた書き方を変えるかもしれません。

フォントサイズの変化でレイアウトはどこまで崩れていいのか。

2011-12-20T03:05:00.000+09:00

フォントサイズの変更に耐えうるデザインというのを日頃気にかけているわけですが、実際のところどこまで、どうなんだろうと悩みます。守らなければならないラインは、はたしてどの部分なのか？

フォントサイズの変更

個人的な結論ですが、フォントサイズの変更には「それほど」柔軟でなくてよいと思っています。

理由は、多くの一般的なユーザーはフォントサイズの変更方法を知らないから。加えて、フォントサイズを変更したとしても極端に大きくすることはないでしょうから。

つまり、フォントサイズを10倍にしても崩れないレイアウトを作る必要はありません。

しかしある程度の変化への対応は必要です。レイアウトが崩れると言っても問題の度合いでいくつかに分けて考える事ができるので、その状況を把握した上で対策を施していくべきかと思います。

どこがくずれるのか

レイアウト崩れの現れる状態は様々です。簡単に重要度の高い順から並べると以下のようになるかと思います。

文字が読めなくなる（他の要素の下に潜り込む等）
ナビゲーションが見えなくなる
文字が重なる
カラム落ち
余白が増えて見た目が悪くなる

最も深刻なのはユーザー内容がを把握できない状態。レイアウトがビクともしなくとも文字が読めなければ話になりません。ユーザーはデザインを見に来ているんではなくて情報を見に来ているので、重要度としてはやはり可読性が一番でしょう。

ナビゲーションのリンクが見えなくなる点も大きな問題です。仮に全体が白地で、ナビゲーション背景が黒でリンク文字色が白だとします。背景画像をパタ−ン化してリピートさせたりbackground-colorで作っていなければ、文字が背景をはみ出した時点で見えなくなります。見えなければ、そのページへ移動ができず大問題。

文字が重なる原因

文字が重なる原因は、主にheightを固定しているためです。フォントサイズが大きくなった際に、指定したheightを乗り越えて下の文字にかぶさって読めなくなります。

他には、絶対配置を行った要素も原因となり得ます。

良いデザインとして紹介されている海外サイト

良いデザインとして紹介されている海外のサイトを見かけますが、ちょっとしたフォントサイズの変更にも対応できていないサイトも見かけます。ブラウザのサイズ変更には柔軟でも、フォントサイズの変更には柔軟でないこともちらほら。

もちろん、紹介されているのは良いデザインであって、フォントサイズの変更に対応できているサイトとして紹介されている訳ではありません。しかし実際に納品され稼働しているサイトには違いなく、完成品の要件としてフォントサイズの変更は必須ではないのでしょう。

やむを得ない事情

フォントサイズの変更に対応した、ビジュアルに優れたデザインは非常に手間がかかります。CSS3やHTML5を利用すればかなり楽にはなるでしょうが、それでも紙のレイアウトのようにはいきません。

特にイラストや写真を厳密にレイアウトした場合、見栄えの良さの代償として柔軟さを失います。横方向はともかく縦方向の変化には対応できないのです。基本的にWEBサイトが横ではなく縦に広がるため、個別の問題ではなく根本的な問題だと言えます。

前述のような海外サイトの現状があるならば、フォントサイズ変更への対応は海外でも最重要の項目ではないという証でしょう。

結び

フォントサイズの変更というのは難しい問題です。

結論としては、以下の2点を押さえていれば最低限のラインは守られるかと思います。

文字がある程度大きくなっても可読性が落ちない
ナビゲーションのリンクがクリックできる

限界までフォントサイズを大きくしても崩れないレイアウトはまず無理なので、必要最低限を押さえる事が重要ではないでしょうか。

アーティストは好き勝手やっているのか？

2011-12-18T22:43:00.001+09:00

何かを作る際、アーティストは要らないと目にすることがあります。これってアーティストをイメージでしか捉えてないなと感じます。この件につき少々。

アーティストは要らないと言われる理由

制作の現場でアーティストは要らないと言われる理由。
おそらく、クライアントの意向を無視して作るのがアーティストだから、そんな人間はいらないということでしょう。

WEBサイト制作であれば、ユーザーの事を考えなかったり作る側の趣味でしかなかったり。一般的に、必要な用件を満たせていないものを作る人といった具合でしょうか。

ですが、アーティストはここで引き合いに出されるような人々ではありません。

アーティストもいろいろ

一番重要なことですが、アーティストとひとくくりにすること自体が間違っています。

アーティストの中には我が道を行く人もいるでしょう。他人を無視し、依頼を無視し、思うままに作る人。クオリティの追求に際限がなく、納期や予算を考えない。

ですが、こんなに偏った人ばかりではありませんし、偏った事ばかりする訳でもありません。前述の場合「わがままアーティスト」や「我の強いアーティスト」でしかないのです。
同様にWEB制作であれば、クライアントを無視した制作物を作るのは「ダメな制作者」であり「無能な制作者」だというだけです。

これ、当然の事ですよね？引き合いにアーティストを出す場合、この点をまったく無視しています。

依頼の上に成り立つ

アーティストといっても様々な仕事があります。中には思うままに作るライフワークもあるでしょうが、依頼を受けて制作する場合もあります。

依頼を受けて作るなら、当然依頼の要件を満たす作品を作ります。予算の概念はもちろんありますし納期もしっかりあります。でなければお金をもらえませんし、質が悪ければ次の依頼につながりません。

「アーティストは好き勝手やっている」というのはイメージに過ぎません。より厳密に言えば、勝手が許される「仕事」があり「人」がいるだけです。ただしアーティストという「職業」ではなく、その人が持つ「権威」に由来します。

結び

今更ですが、また書きにくいテーマで書いてしまったと少々後悔をしています...。また手直しするかもしれません。

蛇足ですが用語の統一のためとはいえ「アーティスト」を連呼すると妙な感じです。「芸術家」にしようかとも考えましたが、WEB制作の文脈ではアーティストの方が良いかなと。とはいえ、どちらも違和感が...。

必要なアクセス経路ってなんだろう？

2011-12-05T02:49:00.001+09:00

時間を基準に、どういうアクセスが必要なのかについて。
ソーシャルサービスを利用した爆発的なアクセスなのか、バナーを利用した一定期間内のアクセスか、SEOによる検索エンジンからのアクセスか、それ以外か。最良なのは全部からのアクセスがあることではありますが。

【2011.12.6 大幅修正&加筆】

サイトへのアクセス

WEBサイトは、アクセスがあって初めて意味を持ちます。見られないページは存在しないのと同じ状態ですから、まさに死活問題。
SEOやPPCやプレスリリースなど多くの手法を用いる理由も、露出を増してアクセスを得るために他なりません。

サイトへのアクセスを得る方法

それでは、どうやってサイトへのアクセスを得るのか？いくつか挙げてみます。

・SEO
・PPC
・バナー
・プレスリリース
・ソーシャルサービス
・メールマガジン
・RSS

個別に特徴がありますから、メリットデメリットやコストは様々。一般的に手法で分けて考えますが、今回は時間を基準に考えてみます。

一時的なアクセス

一時的に多量のアクセスを得られれば、その瞬間に多くの利益が得られる可能性があります。特に流行や季節のトレンドに左右される事柄であれば、特定の瞬間のアクセスは大きな意味があります。

最近のGoogleはトレンドをリアルタイムに反映するような表示をしていますし、検索行為が一般的となった現在ではSEOは有効な手段です。任意のタイミングでユーザーに接触できるメールマガジンやプレスリリースも同じく。

これら以上に効果的なのはソーシャルサービスからのアクセスでしょう。情報の伝播の仕方が爆発的であり、瞬間のアクセスを得る経路として最善かもしれません。

一定期間のアクセス

一定期間に継続したアクセスが期待できる方法であれば、利益にしろコストにしろ予想がしやすくなります。一時的なアクセスと違い、期間内は初期のコストのみが必要という点も良い所。

バナーのように期間を決めて設置するタイプが該当します。設置する場所の選定が的確であれば、非常に心強いアクセス元になるでしょう。
PPCも同様に期間を決めて誘導が可能ですが、入札による順位や価格の変化がある点はバナーよりも不安定です。一方品質を上げるなど操作できる点は、手間をかけることでコストを削減しつつピンポイントに利益を狙えます。

永続的なアクセス

永続的なアクセスが得られれば万々歳。ですがそんなものはありません。
近い状態にできるのは恐らくSEOぐらいかなと。

初期のアクセス経路にはなり得ませんが、永続的なという意味ではRSSも有効な手段です。ユーザーが定期的にサイトの情報を得たいためにRSSを利用するのですから。反面、定期的な更新が可能なブログ型なら楽なのですが、更新情報がほとんど出せないサイトであれば難しくなります。

必要なのは長期的に効果があるアクセス

もっとも重要なのは、長期的に効果があるアクセスを得ることだと思います。
具体的なアクセス経路として、SEO施策により核となるキーワードでサイトを上位に露出させます。

現在のSEOでは、ユーザーを中心に置いたコンテンツ制作を基礎とする考え方があります。特徴は、検索エンジンのアルゴリズム変更に大きく左右されない安定感。リダイレクトや過剰なリンク施策など、検索エンジンの隙を付く手法をとらないためです。

長期を意図した短期的な手法

長期的な安定が見込める状態であれば、短期的な方法にも安心して打てるのではないでしょうか？

見方を変えると、短期的な手法も最終的には長期的な安定を目指せるのであれば良いのだと思います。瞬間のアクセスを的確に掴めても、長期的なアクセスに繋げられなければ安定したアクセスは望めないでしょう。

アクセス元の検索エンジン依存

アクセス元の割合として検索エンジンが大部分を占める場合、普通に考えると危険な状態だと考えられます。検索エンジンのアルゴリズム変更や何らかのペナルティによってアクセスが激減するからです。

しかし、アルゴリズムの隙を付いたりペナルティを課せられたるりする施策を行わなければ危険性は減ります。検索エンジン経由のアクセスという区分けは同じですが、SEOの施策に寄って安全性は大きく変わるのです。この点を無視すると、判断を誤ることになるでしょう。

結び

いろいろなアクセス経路があり、どれもそれなりの効果があります。
同時にすべてを思い通りに利用できれば良いですが、そううまくはいきません。

まずは、もっとも必要なアクセス経路を獲得することが重要だと思います。足場を固めてこそ、他の施策も活きるはずですから。

蛇足

公開時より中盤以降を大幅に修正しました。前の時点である程度頭が整理でき、書くべきことが絞られた感です。こういう書き方は問題あるのですが、新規に書き直すよりも大幅修正の方がまだ良いかと思った次第です。

商品ページをどう作るべきか？を悶々と。

2011-12-02T20:36:00.001+09:00

事情があり、依頼を受けて作成している商品ページのテキストを減らしました。最終的には僅か２行になった次第を書いてみます。

状況

商品ページの説明文に対して、何度か「文字数が多い」と言われることがありました。
クライアントチェック前には、ユーザーへの売り込みやSEOを考えたうえで最小限にしていたにも関わらずです。
なお、商品とは食品です。

返答

今回たまたまクライアントに突っ込んで聞ける機会があり、どのようなテキストがお望みなのか具体的な例を時間をかけて伺いました。
返答は、売りとなる素材について1行と、「○○と△△の取り合わせが美味しい商品」という1行の合計2行で良いとのこと。

結び

クライアントの求める文章は、制作側が考える以上に極端な場合もあることを実感しました。

....どうでしょう？
ここまでの文章で、この記事で書きたかった事実はお分かりになるかと思います。が、この文章から伝わることは非常に少ないはずです。あったことを並べ、詳細や見解その他付随する情報はほとんど無し。例外はありますが、この書き方で相手の感情（例えば「買う気」）を揺り動かすのは非常に難しいと思います。

ですが、クライアントが文字を多いと感じたことも事実です。その点は無視してよいものではなく、何らかの対策を講じるべき事柄です。説明して説得することは難しくありませんが、感じたことを違う方向に説得するべきだとも思えません。

さて。
実はこの文章は最初に書いた文章を削って作りました。削る前の文章が以下の文章です。まぁ、比較すると冗長さが際立つかと思いますが、お時間があればお読み下さい。

===以下、削る前の文章===

商品ページにおけるSEOを意識した文章

基本的にWEBサイトの文章は、1番がユーザーで2番が検索エンジンかと思います。

ユーザーが興味をそそられる、あるいは必要とする内容を記載しつつ検索され得る固有名詞や形容詞をいれこんでいく。SEOを意識しない場合でも言えることではあるのですが、結果的にそれなりの文字数になります。特にECサイトの商品ページにSEOを意識して文章を書く場合、基本的にはロングテール狙いになるかなと。

WEBサイトと実店舗の大きな違いは商品が目の前に無い状態でものを売ることです。それを補うためには前述のように文章で表現することが重要。
もちろん写真を有効に使えば文字を減らしても訴求力を上げられますが、写真が有効であればあるほど文字は邪魔に感じられ、ロングテールに定めたワードは消えやすくなります。SEO的にはマイナス要因となり得るでしょう。

クライアントのご意見

さて。以下は食品を販売するクライアントさんとのやり取りをもとにした内容です。脚色は加えていますし相当はしょっています。

なお楽天ではなく、かなり以前に別の会社が作った独自システムで更新だけ担当している案件です。写真は一枚しか表示できず、サイズは300pxにも届きません。
つまり、テキストがより重要になります。

「文字が多い」

商品ページの詳細を書く時には前段の事を意識して書いていました。が、あまりネットを利用していない店員さんに見ていただいた場合に「文字が多い」と言われることが何度かありました。

今までは必要な説明やキーワードばかりで削りにくいとお伝えし、行間の調節や段落の分け方などを中心として対処していましたが...。今回はたまたま相手の方がゆっくり時間をとれるということで、いつも以上に突っ込んで聞いてみました。

伺ったことをまとめると「やはり文字が多い」との事。

「美味しい。で十分」

では、どんな文章が良いですかと伺った所「○○と△△の取り合わせが美味しい商品」で十分とのことでした。

完成形として、売りとなる素材の名前とそれが入っている旨で1行、「○○と△△の取り合わせが美味しい商品」という1行の合わせて2行で良いとのこと。

商品の説明をする場合、ただ美味しいではなくどう美味しいのかを書くべきだと考えていましたので、結構な衝撃でした。売りとなる素材がなぜ売りなのかという説明も、あって一言ぐらいです。

商品ページに何を書くべきか

今回の件は非常に極端な例。とは言い切れないのではないでしょうか。
商品の説明は多ければ多い程よいとは考えていません。ですが制作する側が考えるよりも、もっと許容ラインは低いのかもしれません。

SEOにおいてはテキストが重要ですし、味見のできない商品を売り込むためにテキストでの説明も必要です。実際に説明が詳細なほど信頼感が増すこともあるでしょうし、文体や的確な表現から購入に至ることもあるでしょう。テキストがなければ、いずれも難しくなります。

しかし、その必要と考える説明すら邪魔に思われる方もいるわけです。売り込むためのテキストが購入の邪魔をしていないとも限りません。

動画や音

今回の件ではいろいろな制約があり不可能なのですが、いくつか方法を考えました。

・テキストを折り畳み、クリックで広げる
・動画をつける
・音をつける

テキストに関しては、見た目の文字数を減らすことが可能な処置です。文字が多いと感じる方への対応を優先する場合、見せない状態を初期状態にする必要があります。

動画に関しては、ECには適していますし訴求力もあります。「あまり見られない」や「長々と見ない」というご意見もあるかもしれませんが、問題はありません。視点の移動を妨げない場所におけば、見ない人は簡単にスルーしてくれます。訴求する点が明確であれば、長さが1分以下でもかまいません。

音に関しては、食品であれば焼いたりした際の音に使えますが、楽器などの音が重要な商品であればとても有効な方法でしょう。

テキストが邪魔ならば、テキストの見せ方やその他の手法で対処するまでです。

結びの結び

最初の書き方と比べ、何かしら違いはあるでしょうか？

この記事は商品を紹介する記事ではありませんから、例としては不適切です。ですが、事実の伝達のみの文章とそれ以外も含めた文章の違いは感じていただけるかと思います。

結論としては、どちらが優れてるという問題でもなく第一の目標である商品の売り込みの達成に必要なことをするべきなのでしょう。SEOは意識しなくてよい訳ではありませんが、目標を達成することが最重要です。

今回の件はあまりWEBを利用されていない方の意見ではあるのですが、自らのテキスト作成能力の未熟が招いた結果でもあります。もっと最小限の言葉で効率よく作れねばなりません。

WEB/SEO関連文献紹介:5

2011-11-22T23:55:00.001+09:00

WEB/SEO関連文献紹介です。タイトルや要約から判断して面白そうな文献を挙げいます。今回で5回目です。

前提

GeNiiで検索した内容を記事にしています。

GeNiiについては資料の探し方という記事という記事を参考にどうぞ。

凡例

以下に凡例を記載します。

本文を読める文献は【本文】と記載
本文データ無しや会員のみ閲覧可能は【抄録】と記載
本文も抄録も無しは【書誌事項のみ】と記載

一覧

HTML要素に基づく有害サイト検出手法【抄録】
池田和史 , 柳原正 , 服部元 , 松本一則 , 小野智弘 , 滝嶋康弘情報処理学会論文誌 52(8), 2474-2483, 2011-08-15
ページ要素をデータベースに直接結び付けるフレームワークとWebサイト設計手法【抄録】
新居雅行情報処理学会研究報告. データベース・システム研究会報告 2011-DBS-153(31), 1-8, 2011-10-27
情報共有を目的としたSNS活用の授業の実践報告【抄録】
古川夏子情報処理学会研究報告. コンピュータと教育研究会報告 2011-CE-111(13), 1-6, 2011-10-07
WebサイトにおけるHCDの実践(<特集>ヒューマンセンタードデザイン(HCD))【書誌事項のみ】
近藤朗　デザイン学研究. 特集号 18(2), 54-57, 2011-06-01
ブラウザ操作履歴に基づいたWebサイト改善ツール【抄録】
木本亮司 , 市村哲　情報処理学会研究報告. GN, [グループウェアとネットワークサービス] 2011-GN-79(23), 1-7, 2011-03-10
誘導的インタフェースの表示方法の検討〜一対比較法を用いた横スクロール型メニューの有効性の検証〜【抄録】
豊田孝明 , 畑中基希 , 納富一宏全国大会講演論文集 2011(1), 207-209, 2011-03-02
Web感染型マルウェアのリダイレクト解析【抄録】
高田雄太 , 森達哉 , 後藤滋樹　全国大会講演論文集 2011(1), 497-499, 2011-03-02
マイクロブログを利用したWebサイトの閲覧者像と地域性の推定【抄録】
西田綾佑 , 高崎隼 , 平田紀史 , 白松俊 , 大囿忠親 , 新谷虎松全国大会講演論文集 2011(1), 781-783, 2011-03-02
時間グラフパターンを用いたWeb解析【抄録】
押野泰平 , 浅野泰仁 , 吉川正俊情報処理学会研究報告. データベース・システム研究会報告 2010-DBS-151(27), 1-8, 2010-11-05
Webサイト上の苦情投稿に対する企業の返答文 : 謝罪における談話機能と談話構造(言語コミュニケーションとそのフィールド)【抄録】
大沢裕子 , 郷亜里沙 , 安田励子電子情報通信学会技術研究報告. HCS, ヒューマンコミュニケーション基礎 110(185), 59-64, 2010-08-20
Webアーカイブにおける差分収集に用いるWebページの更新依存度分析【抄録】
廣道尚弓 , 吉井直子 , 高田雅美 , 城和貴情報処理学会研究報告. MPS, 数理モデル化と問題解決研究報告 2010-MPS-79(8), 1-6, 2010-07-05
検索エンジンはなぜ見つけるのか-知っておきたいウェブ情報検索の基礎知識【抄録】
森大二郎日経BP社|日経BPマーケティング, 2011.3

結び

今回はWEBサイト関連がほとんどです。ちなみに、残念ながら本文を読める資料がありません。

一点SEO関係で内容が読める物がありましたが、内容的に紹介する程でもありませんでした。AISASにからめた普通の内容にみえましたので...。論文もピンからキリまで。

誰にでも使えて効果がある、視点を動かす要素

2011-11-22T08:00:00.000+09:00

「ユーザーの視点を動かしたい！」「この部分に注目させたい！」とは誰しも思うものですが、簡単ではありません。しかし、視点を持って行きやすい方法は存在します。その中でも特に単純な方法を考えてみたいと思います。

視点を動かす要素

視点を惹き付ける方法は色々とあります。
その中にはレイアウトや要素の強調のように全体との比較が前提の方法もありますが、今回は後付けでも使えるより単純な方法を考えます。

一点注意点としては、後付けで何かしら要素を加えるのですから元のデザインはシンプルである程効果的です。ギラギラでピカピカなサイトにはこの方法はほとんど意味がありません。

もっとも、最近のデザインは極力余計な要素を排除したり白基調だったりなので大概は使えると思いますが。

1：矢印

ページ内にボタンがあり、そこに視点を誘導する方法を考えてみます。

最も簡単にして強い要素は矢印です。
なんだそんなことかと思われるかもしれません。しかし、日常的に目にしており記号としての意味が無意識のレベルで刷り込まれている、非常に優れた要素です。加えて、子供やお年寄りやWEBに慣れていない人にもわかる点は大きな強みです。

矢印が優れている点はそれだけでありません。始点と終点に視点を添わせることができるのも強みです。単純な強調であればいきなり強調した部分に意識が行ってしまいますが、始点があるために意図した方向に意図したように動かすことができます。

加えて、実際にサイトへ導入する場合には矢印自体の表現によって様々な印象を与えることができます。

1-1：矢印の強弱

矢印が視点を誘導する力は、矢印の大きさに必ずしも比例しません。むしろ、大きすぎると矢印自体に視線が留まりやすく流れを弱めてしまいます。

重要なのは「流れ」や「リズム」です。
具体的には、矢印の棒部分より先端を大きくする方が流れが強くなります。また、１つの要素内で一部分だけ強調されていると、全体と部分という関係にリズムがうまれて部分への誘導が強くなります。

1-2：矢印の表現

実際に矢印をサイトに用いる場合、サイトのイメージにとけ込む様に作り替えます。必ずしもというわけではないのですが、矢印は異質さで目立つ必要が無いからです。その形を見て矢印だと感じられれば、必要な効果がでるはずですから。

なお、独立した矢印として配置するだけではなく、背景画像として使う方法も有効です。この場合視点を誘導する力は弱くなりますが、視点を動かすために十分な力を発揮してくれるでしょう。

2：丸

丸といってもいろいろですが、今回は丸で囲む方法です。
この方法もありふれた方法です。ノートなどで何かしら強調しようとすると、無意識に丸で囲む方は多いかと思います。それほど普通の方法です。

丸の特徴は矢印と違い方向性を持たないこと。画面に丸が現れると、レイアウトやその他の要素を無視して丸で囲んだ要素に目がいくイメージです。

2-1：丸の表現

ボタンを丸で囲むとその部分が強調され視点が惹き付けられます。が、サンプルとして作成したボタンでは少々違和感を感じます...。コーディングの問題を考えると、ボタンのデザインにもよりますが位置合わせなど微調整が大変そうでもありますし。

丸形や小さめのボタンであれば、使いやすいかもしれません。

より簡単に取り入れる場合には、見出しや商品名などの背景として使用する方法があります。
全体を囲むのではなく、部分的に囲んでいても違和感がありません。違和感無く使う方法としては、自分自身がメモに丸を使うときどうしているのかを参考にするとよいでしょう。

3：数字

最後は数字です。数字には規則性があり、順序をストレートに表します。
特定の要素を強調したり、無理な視点の移動はできません。あくまで迷って混乱しそうな視点の流れを整えるために使います。

なお、ローマ数字や漢数字よりもアラビア数字をお薦めします。
なぜなら日常的に順序を表す場合はアラビア数字だからです。サイト全体として必然性がないのなら、アラビア数字以外では違和感が出てしまいます。そのため補助的な要素としては適しません。

3-1：方向を整える

数字がもっとも効果的に機能するのは、順番が分かりにくい時です。数字を付けることで規則が生まれ、視点は規則に従って移動します。矢印や三角形などで順番を指示することももちろん可能ですが、数字の方が誘導する力は強いはずです。

加えて、実際にコーディングする場合を考えると、数字であればテキストとして入力すれば済みますので手軽です。

ワンポイントとしては、書体を変更することで数字は多彩な表情を持ちます。書体はなにも文字だけに関わる物ではありませんから、求める表情を持った数字を探すことは無駄ではありません。

結び

今回は誰でも日常的に用いる表現方法をとりあげました。

ページ内には視点を誘導する様々要因がありますが、知識やセンスがないと使えない物ばかりではありません。特定部分の強調や順序を整えるのであれば、誰にでもできるのです。
もちろん違和感無くというのであれば経験は必要でしょうが、最低限の機能を果たすことが目的であれば導入するだけで効果はあります。

ディスプレイから顔を上げて辺りを見回すだけでも、ここで上げた以外の要素は見つかるはずです。それをWEBサイトやページに取り込むだけで、思った以上の効果が生まれることもありますので、是非お試しください。

蛇足

ちなみに、今回は見出しに番号を入れています。
番号があると読み飛ばす力より、順番に読もうとする力の方が強くなるのではと考えたからですが...。いかがでしたでしょうか？いつも読み飛ばすけど、今回は全部読み切ったという方がいましたら成功なのですが。

Wordpressの怪しげな笑顔の画像対策：メモ

2011-11-21T13:01:00.001+09:00

先日まで無かったのがいきなり表示されておどろいた。と、言う類いの事柄です。
無理やり消す方法をメモとして。

http://stats.wordpress.com/g.gifという画像

WordPressで作ったサイトの下部に怪しげなニコニコマークを発見。いままでは無かったのですが、本日と突然確認出来ました。が、今振り返ると本当に無かったのかはあやふやで...。少なくとも構築時には無かったのは確かです。

その画像とは以下の画像です。

非常にちっさいですね。でも、ちょいと不気味にみえました。
ちなみに画像はhttp://stats.wordpress.comから引っ張って来ていることがsrc="http://stats.wordpress.com/g.gif"から分かります。

消し方

調べると、2年程前にフォーラムに上げられた記事が。

[解決済み] WordPress.com Statsについて

早い話が、img#wpstats{display:none}と記載し、該当の箇所を非表示にする方法です。タグを扱える人なら誰でも考えるであろう荒技ですね。なかったことにしましょうと言うヤツですから。
とはいえ、実際に消えましたのでタグを特定する手間は省けました。

スマートにダッシュボードから消す方法が分からなかったので、今回は上記の方法で対応しました。

原因

一度この記事を書き上げた後に思いつきで調べてみたら、原因が分かりました。

先日導入したjetpackに関係する様です。具体的にはWordPress.com Statsを導入したら表示されるらしいです。つまりは統計を見るためにWordPress.com Statsをjetpackで設定したら表示されたと....。この要素、必要なんでしょうかね？
なお、この件は下記のブログさんで情報を得ることが出来ました。

[plugin] アクセス解析 WordPress.com Stats の javascriptが読み込まれない件

結び

調べ直してとりあえず原因はわかりました。が、ニコちゃんマーク:)の消し方がいまいち....。力技以外もなければおかしいとはおもうので、また調べようと思います。

WordPress for iOS で複数のサイトの統計情報を見る方法：メモ

2011-11-17T00:11:00.001+09:00

ハマったのでメモ。やり方が分かれば簡単ですが、調べても出てこなかったのでメモとして。

WordPress for iOS

WordPress for iOSは、iPhoneでWordPressを管理できる便利なアプリです。
投稿はしやすく、タブやカテゴリーの入力も容易。画像の挿入も簡単で、動画(.MOV形式)も埋め込めます。投稿の表示自体はタグが丸見えのテキストエディター状態なので、タグを触れるならばかなり自由に作成できます。

WordPress for iOSの統計情報

このWordPress for iOSには最初から「統計情報」というアクセス解析の結果を表示する機能へのボタンが表示されています。この機能を実際に使うためには設定が必要ではありますが。

今回は、WordPress for iOSに二つの異なるサイトを登録し、両方の統計情報を見ることを目的にしています。ちなみに、何もしなければ最初に登録したサイトの統計情報しか見ることができません。登録したブログを削除していれ直しても同じです。

なお、統計を使えるようにするにはWordPress.comに登録してIDとPASSを設定し、jetpackプラグインをインストールする必要があります。
jetpackに関しては、下記のサイトさんを参照ください。分かりやすいと思います。

WordPress.com の便利機能をインストール版に！ Jetpack を導入してみた
：8bitodyssey

カスタム投稿タイプ

カスタム投稿タイプをWordPress for iOSで利用する方法が現時点で不明です。

カテゴリーでも選択肢として出てきませんし、専用の投稿システムがあるわけでも無さそうです。この点、対応していないのか私が見つけられていないのか...。現時点では、WordPress for iOSの使用を前提とするならカスタム投稿タイプの使用は控えた方が良いかもしれません。

エラー内容

統計情報を見るためには、WordPress.comで入力したIDとPASSが必要になります。が、２つ目に登録したサイトの統計情報を見ようとすると「Administratorで入ってくれ」云々と出てきます。しかし、もともと管理者権限のアカウントで入っていますし、仮にWordPressの管理画面で新たに管理者権限のユーザーを作っても統計は表示されません。

エラーや挙動を見ていると、最初に登録したサイトに紐づいているWordPress.comのアドレスに２つ目でもアクセスしようとしているように感じました。

解決方法

解決方法ですが、非常に簡単でした。

ホームボタンをダブルクリックしてWordPress for iOSのアプリを停止後に再起動するだけです。

連続で登録したままの状態だとおかしくなるらしく、一度落として再起動すればちゃんと表示できます。

回避方法？

今回は２つのサイトで別々にWordPress.comに登録しました。おそらく、２つとも１つのIDとpassで登録していれば問題は無かったのではと考えています。

試していないので結果はわかりませんが、今回のエラーが出る可能性は無いかと。

結び

簡単な設定や機能でハマる場合、大抵簡単なことで解決できるものです。が、アプリを再起動しないといけないという根本的な辺りに原因があると、はなかなか気付きませんでした...。

デザインが苦手でも使える、視点の移動に関する基本

2011-11-14T07:10:00.000+09:00

WEBサイトではユーザーの視線を誘導できるか否かは重要な問題です。今回はサイトやページ全体の導線という話ではなく、視点の動きに絞った内容です。

縦書きは右から左へ。横書きは左から右へ。

新聞に代表されますが、日本語には縦書きの伝統があります。縦書きであれば視線の移動は右から左がルール。これを逆から読む方はまずいないでしょう。

ではWEBサイトではどうか？
基本的に海外を含めて横書きがメインであり、日本語のサイトも横書きがほとんど。日本のサイトに限定しても一般的だと言えます。そして、横書きは左から右へと読むことがルールです。

以上の点から考えると。
WEBサイトでは文章の流れに添って、左から右へと読み進めるのが基本となります。

左に壁をつくり右に流す

視線の始点となる左サイドに壁を作り、右に流す方法が通常のサイトでは良くあるかと思います。具体的には、左にサイドナビゲーションのある状態です。

左にサイドナビゲーションがあると、ナビゲーションをさらっと流してすぐに右の方へ視線が流れていきます。なぜなら、視線が移動する右方向に「ひっかかり」が無いからです。

もしも右に行く途中に何らかの引っかかりがあれば別ですが、始点部分にいくら引っかかりを置いても視線は動いてしまいます。感覚的には、「左端には留まりたくない」「右に動きたい」といったむずむず感を感じるといえるかもしれません。

右に壁を作らない方法では、意外と強い視線の移動効果を生みます。サイドナビゲーションを邪魔に感じないようにしたり、右端に重要な要素を置くことでより効果的に視線を惹き付けることができます。

左に戻りにくい

難点は、右に行きっぱなしになりやすい点です。

視線が右に動く力が強いと、左に戻す際には抵抗を感じます。意識的にこの抵抗を実感することは無いでしょうが、ページ内で右から左へと視線を動かすのと、左から右へと視線を動かすのでは微妙な差が生まれているはずです。

もちろん、これは文章の方向性にも影響されています。右方向に流れがある横書きの文字があれば、自然と右向きの力が強くなるからです。

右に壁を作り左に戻す

始点となる左には目立つ要素を置かず、右に壁を作る方法もあります。主にブログで見られる右サイドバーの構成がこの方法に当たります。一般的には再度ナビゲーションとメインコンテンツの間にはラインを引くことが多く、そのラインが壁としても機能します。

また、ブログであれば右サイドにビジュアル的にインパクトのある要素が多くあります。例えば、写真のバナーやソーシャル関連のアイコンなど。これらも右に配置することで壁の補強になります。

視線の動く先の右端に壁があると、視線は左に跳ね返されます。すると、右に壁がない場合よりも左に戻りやすくなります。スムーズにメインコンテンツの隅々をユーザーに見せたい場合には、この壁の効果は良い結果をもたらす可能性があります。

窮屈に感じる

眼前にコンクリ−トの壁があれば、大抵の方は圧迫感と窮屈な感覚を覚えます。視点を移動する際にも同様で、行き先である右に壁があれば窮屈さを感じてしまいます。

窮屈さを感じる場合、壁となる要素の色や幅を調節して強い壁にしない方が良いです。10pxで黒い線よりも、5pxでグレー線の方が壁に対する感覚は軽いはず。跳ね返る力も弱くなりますが、窮屈な印象も弱くなるでしょう。

右端に釘付け

壁の部分に目を惹くバナーを置いた場合、右に行ったまま視線が戻りにくくなります。いわば釘付け。

目を惹く要素の例としては、彩度の高いカラフルな要素やユーザーの関心を引く写真なり文章なりがかかれた要素です。具体的に言えばアフィリエイトやアドセンスなどがあてはまるでしょう。

メインコンテンツを読ませるという意味ではデメリットですが、アフィリエイト目的であれば当然あり得る配置です。

全てにあてはまらない

ここまで、文章の方向性からWEBサイトでの視線の動きを考えてみました。が、何よりも強いという要因ではありません。意志の力や関心により打ち消されてまいます。

内容に惹かれて読み始めたなら両サイドに何があろうと視点はメインコンテンツに集中しますし、右にバナーがあるからと言って必ずクリック率が上がるわけでもありません。

また、サイトは単一の要素で構成されることは少なく、複合的な要因が存在するのが当然です。複数ある要因の一つを整えたからといって、効果が出るはずもありません。

とはいえ「視点は文字方向に従う」という要因は確かに存在します。意図しておくべき事柄です。

結び

ナビゲーションを左にするか右にするか。
バナーを右にするか左にするか。
メインコンテンツを縦に区切る線を太くするか細くするか、色を濃くするか薄くするか。

これらで迷った際には視点の移動を基準に考えることも有効です。結果として読みやすさやページの目的を達成できる形になれば、要素の配置に成功したと言えます。

何も無い事に意味を持たせてはいけない

2011-11-12T07:12:00.001+09:00

良くある事ではあるのですが、無意識にやってしまう事もあるお話かと思います。
特に詰めなければいけない部分に関しては。

何もない事に意味を持たせない

ごく単純にいえば、

何らかのアクションがない事を肯定や否定の意味で捉える事はよろしくないと思っています。

例えば。
時として忙しい相手の事を考えすぎて「メールの返信がない事を了解と見なす」という確認の方法をとる場合があります。相手は返信の必要も手間もなく、こちらは返答の催促をする必要もありません。
会話中に返事がない事をもって、なども同様です。

一見効率の良い方法に見えますが、相手の返答は肯定の否定の２つだけではありません。沈黙が物語る内容はその方の頭の中にしかありませんので、沈黙から正確な意味が読み取れるはずがありません。

打ち合わせの場合を考えれば、後々で問題になるケースも容易に想像できるかと思います。であれば、デメリットと大きさも容易に想像できるはずです。

WEBサイトの表記の問題

WEBサイトでは、基本的に文章や説明図などで内容を表します。

特にECサイトでは商品の説明から買い物ガイドまで、明示的に表現する事の重要性は計り知れません。用途が明確なWEBサイトほど、何も無い事に意味を持たせるリスクは高まります。

もちろん、会社やお店によっては大々的に書きたく無い、あるいは書けない事も多々あります。しかし、そういう部分は大抵問題の種となる場合が多いのではないでしょうか？であれば、書かずにうやむやにするよりも書いて明確にする方が良い場合もあるはずです。

「言いたく無いことほど書くべきだ」というよりは、「書かないと誤解を招く」や「書かないと混乱させる」から書くべきなのだと思います。ユーザー側がどういう情報が必要かという点で考えれば、言いたいこと言いたくないことなどの視点とは違う判断ができるのではないでしょうか。

何も無い事に意味を持たせる

前述と矛盾しますが、何も無い事に意味を持たせる事も大切です。例えばデザインの上の手法です。

もっとも分かりやすいのは余白でしょうか。余白には何もありませんが、そこには重要な意味を持たされているからです。分かりにくい言い方になりますが、「何も存在しない余白という、意味のある部分が存在する」とも言えます。

図と地の関係を考えると、更に複雑になります。一見、余白が地で余白以外が図に見えますが、余白にこそ意義があるなら図と地の関係は逆転します。もっとも、この辺りを突き詰めて行くと面白いとも思いますが。

結び

以前の記事から期間が空きましたので、リハビリがてらつらつらと書いてみました。

SEO的に記事を書き続けることが重要というのもあるのですが、単純に内容や書き方等のスキルアップや維持のためにも書き続ける方が良いと実感した次第。
「書かずば書けず」に尽きるかもしれません。

Custom Post Type UIでカスタムタクソノミーを設定する際の注意点：メモ

2011-11-05T16:30:00.001+09:00

Custom Post Type UIでカスタムタクソノミーを設定する際に無駄にハマったので忘れないうちにメモ。基本は大事と言う事ですね...。

Custom Post Type UIでカスタムタクソノミーを設定する際の注意点

Custom Post Type UIは、Wordpressのカスタム投稿とカスタムタクソノミーを簡単につかえる便利なプラグインです。他のプラグインと何ら変わらず、プラグインをインストールして有効化すれば使えます。本当にただこれだけ。

しかし、カスタムタクソノミーを設定後にダッシュボードに現れた分類名をクリックすると「間違えましたか？」という表示が表示されました。

経過

プラグインをインストールし直したり、情報を探しまわりましたが対策が分からず。

このプラグインは基本的には上記のように設定後即使える代物です。functions.phpになにも記載せずとも良いわけで。別のサイトでは普通に使えていたので、余計に分かりませんでしたが。

が。
基本的なミスが原因でした。

対策

結論を言えば、カスタムタクソノミーの「名前」に大文字のアルファベットを使った為です。小文字に直したら問題なく表示されました。

最初から大文字は使うなと言う事ですね...。

結び

見通しの良い平地で転んだ傷みを忘れないようにします。
以上、メモでした。

Fireworksで気楽にカラフル素材を作る方法

2011-10-24T10:52:00.000+09:00

主に単純な形状に適した方法になりますが、カラー素材の気楽な作り方を記事にします。作る過程ではあまり色を気にしないでも良く、後々に再利用しやい方法です。
もちろん、色を意識して作ればよりよい素材が作れます。

前提

私は基本的にFireworksで素材を作成しますので、この記事はFireworksでの作業を前提としています。しかし、作成方法自体はPhotoshopでも簡単に再現できますから適宜読み替えてください。

目的

素材作成の際に悩みやすい要素の一つは色です。今回は色を気にせずに作り始めて、完成手前で色をつけて素材を作ることが目的です。
この方法であれば元の素材がそのまま残りますので、色やテクスチャを変更する事で簡単に再利用ができます。

例えば立方体を作る場合、最初に何色の立方体にするかを考えてから各面の色を決めて作ります。この方法だと思い通りにできる反面、色決めに時間がかかります。アクセント的に使う場合、そこまで注力できない事もあるでしょう。そんな時に役立つかもしれません。

Step1:モノクロームで作成

まずはモノクロームのグラデーションで作成します。

なお、この記事で言うモノクロームのグラデーションとは白から黒へと変化するグラデーションであり、無彩色の色相です。最初に無彩色で作成することが今回の肝でもあります。

試しに球体を作成してみます。

Step1-1:球体の作成

球体を作る際はシェイプで円を作ります。Fireworksの場合、楕円ツールを使います。とりあえず正円が作りやすいでしょう。

Step1-2:グラデーションで立体感をだす

作った正円にグラデーションで立体感を付けます。グラーデーションを作る際には丸いボールをイメージします。具体的には、一点から光が差し込み陰影が出来ている状態ですね。

光源を設定し陰影のイメージができたら、塗りのグラデーションを使ってイメージを再現します。Fireworksでは塗りで楕円のグラデーションを選択します。

ハイライト（白:#FFF）の部分を左上に移動するだけで立体感が簡単に出ます。左に動かすとグラデーションの範囲が円全体に及ばなくなるため、範囲を少々拡張します。

Step1-3:グラデーションを調整してさらに立体感をだす

グラデーションのハイライトを適用しただけでも立体感は出ますが、少し手を加えるとより良くなります。具体的には、陰影を濃くし、ハイライトを和らげ、照り返しを作ります。

この辺りは自然の観察が役立ちますが、機械的にパターンを適用してもなんとかなります。なぜなら、誰しも無意識のうちに立体感を感じる要素を何となく理解しているからです。グラデーションを弄ると、どこかの時点でしっくり来るでしょう。

Step2:色をつける

続いて、モノクロームの球体に色を付けます。この工程が肝でして、前段のグラデーションを壊す事無く着せ変えるように色を変える事が出来ます。

Step2-1:フィルタの「カラーの塗り」で色をつける

ここで活躍するのはフィルタです。元の画像を傷つけずに様々な効果を得られます。今回はまず「カラーの塗り」を適用します。

適用するだけではべた塗りで塗りつぶしただけですので、ここで重ね方を乗算にして適用量を調整します。
これで色付きの球の完成です。

Step3:色を変える

続いて色を変えてみます。簡単に色を変える事ができるのがこの方法の良い点です。

Step3-1:カラーの塗りの色を変える

方法は簡単でStep2-1でフィルタに設定した色を変えるだけです。とてもカンタン。

色を変えるだけでなく適用量や重ね方を変える事で、更にイメージに近い球体が作れます。普段使わない重ね方が意外と一番良い結果を生む場合もあります。元の球体は痛みませんので、自由に色や重ね方を変えてみてください。

もちろん、この時点で元の球体の色を濃くしたり薄くしたりする事も有効です。

更に手を加える

仮にメイン素材に使う場合には、更にテクスチャを重ねたり、作成したカラーの素材に色を変えたバージョンの素材を乗算やオーバーレイで重ねたりします。微量な適用により色に幅が出て、より魅力的な素材に仕上がります。

結び

いかがでしょう？意外と簡単ではないでしょうか。
今回は分かりやすく球形で行いましたが、モノクロームであれば立方体でも写真でも同じようにできます。

最初に無彩色のモノクロームで作る理由は単純で、上に色をのせた時の変化が単純だからです。仮に色がついた素材を基本にすると、色の重なりを最初から考慮しなければなりません。グレーであれば、その心配は無くなります。

立体感だけではなく、統一感をもった微妙な色の表現をしたい場合にもお試しください。

「WebデザイナーのためのWordPress入門　3.x対応」を読んでみた

2011-10-19T23:25:00.000+09:00

個人的に、何かしら基礎を勉強しようとすると本を買います。理由は簡単で、方法としての慣れと一覧性です。今回はWordpressに関する本を購入しました。

書誌事項

「WebデザイナーのためのWordPress入門　3.x対応」の書誌事項です。

書名：WebデザイナーのためのWordPress入門　3.x対応
著者：高山一登
発行所：技術評論社
発行日：2011.10.3　初版
ISBN：978-4-7741-4808-3

購入のきっかけ

この本を購入したきっかけは、カスタマイズに必要な物ってそもそもなんだろうと思ったからです。

Wordpressのカスタマイズに関しては公式を含めて非常に多くの情報があります。導入から設定、簡単なカスタマイズ、プラグインの紹介、プラグインの作成などなど。非常に多彩で貴重で有益な情報が無料で見つかります。

0からのWordpressサイト作成に関しても、有名無名含めて情報が公開されています。ですが、個人的にはいまいち全体が把握できませんでした。

そこで、実際に必要な事を体系的に確認したいと思って「WebデザイナーのためのWordPress入門　3.x対応」を購入しました。本であれば複数人が内容や構成に関わり、一定のレベルを実現しつつ客観的な意見も取り入れられている可能性が高いからです。

特徴

題名の通り、Webデザイナー向けの内容です。HTMLやCSSの説明はほとんどなく、Wordpressの仕組みやテンプレートタグが分かりやすく書かれています。

しかし、一番の特徴は本書の根底に「Webデザイナーならここでこう疑問に思うだろう」というタイミングで解説が入る点です。個人的な主観ではあるのですが、非常に読みやすいです。呼吸が合う感じでしょうか...。

文中では、常に明確にWebデザイナーがなじみ深いHTMLやCSSの関連で記載があるわけではありません。例えば「HTMLならこうだけどWordpressではこう」というのはあまり見えません。この辺り、作り方が上手いなと感じました。

Chapter1　ワードプレスの世界へようこそ
1.1　ワードプレスとは

ワードプレスの魅力
ムーバブルタイプとの違い

1.2　まずはインストール

インストールの前に
インストール手順

1.3　インストールしたらまずやること

ユーザー情報の変更
ユーザーの追加
ブログ情報と設定の変更
テーマの選択
ウィジェットの選択
プラグインのインストール

Chapter2　はじめてのテーマカスタマイズ
2.1　テーマとは何か

テーマファイルの中身
テンプレートファイルとは

2.2　デフォルトテーマをカスタマイズする

この章で作成するサンプル
サイト設定
ヘッダー・フッターのカスタマイズ
トップページのカスタマイズ
投稿ページのカスタマイズ
固定ページのカスタマイズ
カテゴリーページのカスタマイズ

Chapter3　プログラミング・ワードプレス
3.1　ワードプレスとPHP

PHPの基本
変数と配列
演算子
条件分岐と繰り返し
関数
代表的な関数

3.2　テンプレートタグ

テンプレートタグとは
メッセージループ

Chapter4　オリジナルのテーマを作る　～フォトギャラリー～
4.1　オリジナルのテーマを作る

テーマに必要なファイルを用意する
テンプレートの階層と種類

4.2　フォトギャラリー

この章で作成するサンプル
サイトの準備
ポストサムネイルの利用
カスタム背景の利用
ヘッダーとフッター
トップページ
フォトページ
フォトページにコメント欄を表示する
フォトページに一覧を表示する

Chapter5　CMSとしてのワードプレス　～商店サイト～
5.1　商店サイト

この章で作成するサンプル
サイトの準備
カスタムポストタイプの利用
カスタムタクソノミーの利用
カスタムフィールドの利用
メニューの利用
カスタムヘッダーの利用
ヘッダーとフッター
トップページ
商品の詳細ページ
商品の一覧ページ

Chapter6　マルチデバイスへの対応
6.1　携帯への対応

Ktai Styleプラグイン
インストールと設定
テンプレートの編集

6.2　iPhoneへの対応

WP Touchプラグイン
インストールと設定
テンプレートの編集

Appendix

App.1　主なプラグイン
App.2　主なテンプレートタグ
App.3　主なワードプレス関数

※技術評論社「WebデザイナーのためのWordPress 入門　3.x対応」のページより引用

内容

目次にあるように、Wordpress関連の書籍としては一般的な印象です。さすがに3.x対応を謳っているだけありカスタムタクソノミーについての説明もあります。説明としてはもっと詳しく書いていれば良かったのですが...。他の箇所もそうですがもう少し個別の項目を深く、と思うと物足りない部分はあります。入門書ゆえの感想ですね。

カスタマイズ部分にはスタイルシートの該当部分が記載されていますが、そこにCSSの解説はほとんどありません。普段CSSを使っていれば見て理解できるため、不要な説明が無くむしろ好印象でした。
サンプルは装飾的な表現がありきですが、実際の解説は装飾部分ではなくテンプレートタグの使い方などに特化している点も同様に感じました。

phpについて

最初にphpの説明を行いますが、この本を読んだ後に更にWordpressのカスタマイズを進める際に役立つようにと考えられているようです。

本書中のWordpressカスタマイズ部分には直接関係しないと思われる、phpの関数が多少記載されているためです。本書を最後まで読み、更に先に進むため肥やしになりそうなイメージです。

Ktai Styleについて

Ktai Styleのカスタマイズについて書かれている点も良かったです。Webで情報を漁ると断片的なものや全体の流れが分かりにくいものがあり、本の形で読めると分かりやすさが違います。

具体的にソースを見ると分かりやすいというメリットもありますが。

最も良い点

一番良いと感じた点は、同じ事が繰り返し記述されている点です。

具体的には、Wordpressテンプレートタグが出てくる度ごとに同じ解説が繰り返される事です。通常であれば一度記載した内容が再登場した際に同じ説明はしません。読者はページを戻り、見直すわけです。本書の場合は、常に再確認がその場ですぐにできるのです。こういう書き方はあまり見ませんが、学ぼうとする場合には心強く感じました。

結び

本書は、基本的に入門のための本です。購入する場合横により詳細な本があれば、恐らくどちらを買うか迷うでしょう。その場合は、何のために本を探しているかを考えてみてください。

私のように基礎を俯瞰したいなら、たとえ横の本より薄く値段が高くとも本書をおすすめします。カスタマイズをより深く行いたい、個別に解決したい複雑な問題があるという場合には本書をおすすめできません。

WEB/SEO関連文献紹介:4

2011-10-11T23:08:00.000+09:00

WEB/SEO関連文献紹介です。タイトルや要約から判断して面白そうな文献を挙げいます。地味に4回目です。

前提

GeNiiと学術機関リポジトリポータルJAIROで検索した内容を記事にしています。古い文献が多いので出版年を意識した上でご覧下さい。

GeNiiについては資料の探し方という記事という記事を参考にどうぞ。

凡例

以下に凡例を記載します。

本文を読める文献は【本文】と記載
本文データ無しや会員のみ閲覧可能は【抄録】と記載
本文も抄録も無しは【書誌事項のみ】と記載

一覧

ウェブサーチエンジンに見る統合検索 (特集統合検索)【書誌事項のみ】
山名早人情報の科学と技術 61(9) 343-348 2011 09133801
Link Depth: Web 情報探索行動の閲覧パターンの分析【本文】
江草由佳 , 高久雅生, 齋藤ひとみ , 寺井仁 , 三輪眞木子 , 神門典子情報処理学会研究報告 IPSJ SIG Technical Report,2009-DBS-148(20) 2009-FI-95(20),1-7,2009-07-28
大学生のサーチエンジン情報探索行動の分析：タイムサンプリング法を用いて【本文】
逸村裕 , 種市淳子名古屋大学附属図書館研究年報,4,1-12,2006
特集5 : 研究速報 : シーン記述言語を用いたマルチメディア検索システム【本文】
佐藤隆 , 山根淳 , 龔怡虹 , 坂内正夫　生産研究 , 44 ( 11 ) , pp.540 - 543 , 2011-09-06
キーワードに基づくTwitterユーザ検索方式の比較【書誌事項のみ】
野呂智哉 , 茹飛 , 肖峰 , 徳田雄洋　日本ソフトウェア科学会第28回大会講演論文集 , 2011-09
語の共起を効率的に検索できる日本語作文支援システム「なつめ」の紹介【書誌事項のみ】
阿辺川武 Hodoscek Bor , 仁科喜久子言語処理学会第17回年次大会発表論文集　pp.595 - 598 , 2011-03
ジャンル別に共起情報を検索できる日本語作文支援システム「なつめ」【書誌事項のみ】
阿辺川武 , ボルホドシチェク , 仁科喜久子　異文化コミュニケーションのための日本語教育 pp.774 - 775 , 2011-08
文間の弱対立関係の定義と認識【本文】
大木環美奈良先端科学技術大学院大学 2011-03-24
ソーシャルブックマークの特性に基づいたウェブ検索ランキングに関する研究【抄録】
山家雄介 2011-03-23
画像データを利用した情報検索に関する研究【本文】
清水一憲 , 伊東栄典情報処理学会火の国情報シンポジウム2011 p.B-4-4 , 2011-03 , 情報処理学会
大学機関リポジトリのアクセスログに現れる検索語と論文題名との関係について【抄録】
木下仁 , 馬場謙介 , 伊東栄典 , 廣川佐千男情報処理学会火の国情報シンポジウム2011 p.B-3-2 , 2011-03 , 情報処理学会
インターネット情報検索環境におけるブラウジングの検討【本文】
吉岡敦子学習開発学研究(3) , pp.61 - 68 , 20100331 , 広島大学大学院教育学研究科学習開発学講 ISSN:1883-8200
異種頂点ネットワークで表現されたインターネットQA掲示板の分析と視覚化【書誌事項のみ】
村田剛志 , 池谷智行人工知能学会論文誌 23 ( No. 5 ) , pp.293 - 302 , 2008-06
クエリログを用いた地理的検索対象の時空間分析【抄録】
風間一洋情報処理学会研究報告. データベース・システム研究会報告 2011-DBS-152(9), 1-7, 2011-07-26

結び

今回は本文を読める資料が多めです。

論文を公開する基準は色々ですが、積極的に公開しているところもあります。本文の閲覧が期待できなくとも、気になる論文を見かけたら検索してみる事をおすすめします。

新Google analyticsで日別表示が変更できない時の対策：メモ

2011-10-05T07:09:00.002+09:00

新Google analyticsで日別表示が変更できない時の対策をメモ。
といっても原因が分からないので対処療法的な内容。

新Google analyticsで日別表示が変更できない

Google analyticsが新しくなってから、日別表示を月別表示や週別表示に変えられなくなる事が多くなりました。

カスタムレポートを使っておらず、通常のユーザーサマリーであっても症状が出ます。しかも、一度表示変更ができていた解析画面でも、他の画面で一度変更できなくなれば元の画面に戻っても変更できなくなっています。

なお、環境はMacのFirefoxとChromeです。

対処法

何度か試してみて一応動作が元に戻る事が確認できましたので、下記の方法が有効のようでした。直し方はとても単純で、

リロードするだけです。

リロードすれば表示の変更が可能になりました。

結び

原因が分からず以前からちょびちょび調べていたのですが、一向に原因がわかりません。時間別表示は指標やその組み合せのよりできない場合があるとヘルプで確認できましたが...。

症状が出た際は、毎回ログアウトしたりブラウザを立ち上げ直したりしていたので、リロードの方がまだマシかと思います。ブラウザの設定に問題がある気もしますが...。デフォルトでもなる事があるので、結局原因は不明のままです。

手描風の説明画像の作り方

2011-10-03T02:00:00.000+09:00

このブログでたまに使っている、説明画像の作り方のポイントを記事にしてみます。特に大した事はしていないのですが、ポイントとして意識している事はありますので。

前提

いきなりですが、この作り方をするにはベクタデータ（いわゆるパス）をつかえるほうが楽に作れます。

私はFireworksCS4を使っていますが、もちろんillustratorでも問題ありません。また、マウス操作に慣れていたりペンタブレットがある場合はPhotoshopでも楽につくれるかもしれません。

作り方のポイント

作り方のポイントはたった2つ簡単。

手描き風の線とフォントを使うことです。

私の場合、どちらかと言えばフォントよりも線を重視しています。フォントは堅いゴシック体でも、線が手描きであれば手描きの印象が強くなります。逆に線が機械的でフォントが手描き風だと、手描きの印象は薄ると感じています。

作例

それでは、作例を挙げて説明をしてみます。

手描き風のフォント

このブログでは、手描き風のフォントとしてあんずもじを使っています。女性的なフォントですが、きつい可愛らしさなどが無くすっきりとしているので好んで使っています。
あんずもじ以外の手描き風のフォントを使っても、もちろん効果はあります。

ゴシック体を使うと堅い印象になります。加えて、WEBサイトではゴシック体が通常のフォントとして使われる事が多いため、違和感が無さ過ぎて印象が弱くなります。

手描き風の線

線を描いて図と文字を関係づける際、線の表情が重要になります。慣れや求める表現の問題もありますが、個人的にはベクターデータを使います。ベクターであれば適度にマウスで描いた線を補正してくれますし、後の修正も楽だからです。

時として意図しない方向に補正されますが、それも味として活かせます。

Fireworksでは、ベクトルパスツールに「精度」の項目があります。どの程度描いた線を再現するかという意味合いです。精度が高ければ描いた線のままベクターデータになりますし、低ければ簡略化したポイントで線画引かれます。

個人的には、精度は1の方が見た感じがよく修正もしやすいのでおすすめです。

手描き風の囲み円

指定する部位を囲む円は、綺麗すぎたり適当すぎたりすると見栄えが悪くなります。手描き風の円を描く場合は、曲線だけではなく線の端を重視するとよいでしょう。

なお、画像で示したのは一例です。基本的には自分で紙に書いた円を参考にした方が、より個性的な手描き感がでます。本人が描いたものをまねるのですから当然ですね。

比較

以上の事柄を比較するために一枚の画像にしました。

下段の左右を見比べて見てください。
片方は文字が手描き風で、片方は線が手描き風。結果としてどちらが手描きのイメージが強いでしょうか？私は線だと感じています。ですので、フォントがどうであれ手描き感を出す場合には線を重視しています。

結び

簡単な記事なのですが、思ったよりも大掛かりな感じになってしまいました...。
とはいえ、記事のテーマともかぶりますがちょっとした印象を残したり強化するためには、ある程度手間をかける必要があります。本来の意味とは少々違うかもしれませんが、

神は細部に宿る

ともいえるでしょう。捕われすぎてもダメですが。細部は全体を構成するためにあり、全体は細部無しには構成され得ないのですから。一方のみに集中する事はバランスを欠きます。

なお、今回の記事はあくまで個人的な間隔による記事です。もちろん「そんな感じ」だけではなく上記以上に詳しく説明はできますが、手描きに見えないのであれば説明は無意味です。上記のサンプルが、私の意図した手描き風に見えるならば幸いです。

Bloggerの新しいテンプレートを実際に試してみた。

2011-10-01T11:17:00.001+09:00

先日公開された新しいブロガーのテンプレート。せっかくのなので、日替わりぐらいの感じで試してみようと思います。

※現在はテンプレートを元に戻しています。新しいテンプレートをご覧になりたい方は、下記のリンクからどうぞ。それぞれのテンプレートでの表示を見る事が出来ます。

http://cubismer.blogspot.com/view

新テンプレート

いつもならここで新しいテンプレートの説明をするのですが...既に紹介されているところがあるので、そちらをご覧ください。

Blogger に新テンプレート「ダイナミックビュー」が登場

さて、今ご覧にっているテンプレートはいかがでしょう？現在(2011.10.1)の状態は全くテンプレートをカスタマイズしていません。切り替えただけです。

Bloggerが今後どうすすむのかわかりませんが、他とは一線を画すスタイルに進むのも面白いかと思っています。ただ、このブログのように読む事だけを目的にしたブログだと、ダイナミックビューは結果的に合わないかもしれませんが...。とはいえ、使えるかもと思っているテンプレートもあるのもたしかですが。
なお、今回バックアップはとっていますが、ぶっつけでやりましたので以前のデザインに寸分違わず戻せるかはわかりません。その際は、ダイナミックで続ける可能性もあります。

各テンプレートのスクリーンショット

各テンプレートのスクリーンショットをとってみました。これらは常時、左上の三角矢印から変更できます。テンプレート設定時に選んだテンプレートは、最初にどれを表示するかを設定するイメージのようです。

Classic

Flipcard

Magazine

Mosaic

Sidebar

Snapshot

Timeslide

注意点

設定してみて、いくつか使いにくい点や注意点がでてきました。今後改善されるとは思いますが、現時点で利用を考えている場合は留意しておいた方が良いでしょう。

試験導入中

2011.10.1現在ですが、試験導入の模様です。今後修正が入ったり機能が追加されたりするはずです。

現時点ではいろいろと困る点も多いので、本格的に導入するのは一般向けにリリースした後の方が良いと思います。

HTMLの編集

テンプレート選択時に選べていたHTMLの編集が選べなくなっています。テンプレートデザイナーには移動できますが、そこでも機能制限があります。

Google Analyticsのコード設置

HTMLが編集出来ないということは、Google Analyticsのコードを入れる場所がありません。 2011.10.1現在、試しに唯一ソースに記述を追加出来るcss部分に無理矢理コードをおいていますが、機能するか微妙です。

2011.10.2追記
一日経ってから確認しましたが、10/1のセッションが2ケタでした。タグの設置方法がダメだったようです。
恐らく、今後はheader内にコードを入れる事ができるようになるかとは思いますが、ならない場合は解析タグやmetaタグなどの設置ができなくなるかもしれません。

スマートフォンでの閲覧

ダイナミックビューはスマートフォンでは閲覧ができません。ダイナミックビューではなく以前からあったスマートフォンようのテンプレートで表示されます。

サイドバーとフッター

一見して分かる通り、サイドバーやフッターのエリアがありません。

入れていたウィジェットは無くなるようですので、気軽にテンプレートの利用を考えない方が良さそうです。記事中に書き込んだものはもちろん表示されますが、記事の外にある物は基本的になくなります。

これはナビゲーションも例外でありません。ダイナミックビューはそのレイアウト自体が全体でナビゲーションとなるように組まれているようですので、通常のブログのナビゲーションは不要とばかりに表示されません。

ラベルの一覧

ダイナミックビューにもラベル表示があり、記事に付けたラベルに従ってモーション付きで綺麗に並びます。

ですが、一見すると数が少ないようです。恐らく重複するラベルは何かしらの優先順位よって、どれか一つのところにまとめられてしまうのでしょう。

Bloggerのアクセス解析数値

Bloggerのアクセス解析数値を見てみると、どうやら個別記事の閲覧をカウントされていないようでした。イメージとしては、全てのPVがトップページに合算されている感じです。 Bloggerの解析は以前の仕様のままの様なので、ダイナミックビューには対応していないのかもしれません。

テンプレートを元に戻す際

テンプレートをダイナミックビューから戻す際、事前にバックアップがあれば完璧です。

しかし、バックアップがなくとも旧テンプレートに戻せばサイドバーやフッターの情報は復活しています。ダイナミックビュー使用中は見られませんが、データとして保留されているようです。さすがにテンプレートに加えたカスタマイズはこの方法では戻りませんが、全て一からでは無い点は安心できます。

結び

Bloggerが使いたくなった方は、即登録！なんてどうでしょう？

と、思っていたのですがそうそう旨い話ではなかったようで。ビジュアル的にはかなりリッチで魅力的になりましたが、細かいカスタマイズができず使わされている感じが徐々に強くなります。とくに今迄とは概念の違う構成になりますので、ユーザーはもとよりWEBマスター側がしっかりと理解していないと宝の持ち腐れになるばかりか、害にもなりそうな不安感を覚えてます。

反面、ビジュアル的な魅力は高く、写真中心のギャラリーサイトなどには向いているように思えます。また、全体のレイアウトがナビゲーションと融合しているため、機能的な面もあります。一覧での情報量も多いため、過去の記事へとユーザーを誘導できる可能性もあります。

ダイナミックビューは、当初感じたよりもかなり尖ったテンプレートのようです。現在の試験導入を過ぎた後、どのようになるのか楽しみです。

Wordpressで任意のウィジェットを記事中に表示させる方法：メモ

2011-10-01T05:54:00.000+09:00

Wordpressで便利なプラグイン。できることは色々あるようですが、特にサイドバーやフッターにウィジェットを表示するものが多いかと思います。
この記事はウィジェットを記事の中に表示する全くスマートでない方法を忘れないようにするためのメモです。

前提

冒頭に書きましたが、プラグインでサイドバーなどに表示出来るウィジェットを記事の中に取り込むことが目的です。index.phpや配布されているウィジェットをカスタマイズせずにできるだけ簡単に表示させることを目指しました。

phpやwirdpressに詳しい方ならもっとスマートにできるはずですが、それほど詳しくない人間でもできる力技の方法です。

用意するもの

用意するものは以下の通り。

表示させたいプラグイン
プラグイン『Exec-PHP』

カスタマイズ又は参照するファイルは以下の通り。

functions.php

あとは、記事の中にタグを書き込み、cssで成形します。

概要

結論に近いですが、作業の概要です。

まず、管理画面の『外観』＞『ウィジェット』に表示させたいウィジェットだけを入れた場所を作ります。数が足りない場合はfunction.phpをカスタマイズして増やします。
あとは目的のウィジェットを表示させるためのコードを作り、記事に記入。記事内でphpを動かすために『Exec-PHP』をインストールして有効化すれば完了。

これだけです。

方法

方法と言っても、ウィジェトの追加は簡単ですので、必要なのは目的のウィジェットを表示させるためのコードを作るぐらいです。

表示させる為にはウィジェットのIDをしらなければなりません。知るためにはfunctions.phpを見ます。twentytenのテーマファイルにあるfinction.phpを例に挙げると、370行目ぐらいにある『function twentyten_widgets_init()』を探します。


function twentyten_widgets_init() {
	// Area 1, located at the top of the sidebar.
	register_sidebar( array(
		'name' => __( 'Primary Widget Area', 'twentyten' ),
		'id' => 'primary-widget-area',
		'description' => __( 'The primary widget area', 'twentyten' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Area 2, located below the Primary Widget Area in the sidebar. Empty by default.
	register_sidebar( array(
		'name' => __( 'Secondary Widget Area', 'twentyten' ),
		'id' => 'secondary-widget-area',
		'description' => __( 'The secondary widget area', 'twentyten' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

あとは各『register_sidebar』に記載された『'id' => 'ID名',』を見つけるだけです。この場合だと、『primary-widget-area』必要な情報です。

実際には、管理画面の『外観』＞『ウィジェット』の画面でウィジェットを入れた場所に対応してたidを使います。

あとは、記事内に


<ul>
<?php dynamic_sidebar( 'ID名' ); ?>
</ul>

を記述するだけ。『Exec-PHP』を有効化していれば表示されます。

注意点

この方法が力技だという事以外にもいくつか注意点があります。
基本的には表示やcssでの成形に関わる事柄です。

<ul>を必ず付ける

前述の<?php dynamic_sidebar( 'ID名' ); ?>で表示されるHTMLはリスト要素の<li>で囲まれています。<ul>まではありませんので、<ul>を付けないと表示がおかしくなります。

実際にはfunctions.phpのサイドバーの箇所で生成するタグを指定しているので、そこを書き換えて対応する方法もあります。しかし一部だけを変えるとややこしくなるのであまりお勧めできません。構造上矛盾が生じない場合は、おとなしく<ul>で囲んだ方が良いと思います。

cssの書き方

最終的にブラウザで表示されるHTMLの構成やclass名などを知らなければcssで装飾ができません。

FirefoxのFirebugやブラウザ付属のソースを見るツールなどを使って必要な情報を取得する必要があります。ここが分かれば、場合によってはウィジェットの中身の装飾もかえる事ができます。地味ですが最終的な出力から辿って行くことで、意外となんとかなる場合もあります。

結び

今回も時間をかなり食いました。

最初はウィジェットのテンプレートファイルを見て必要な情報を手に入れて任意のところに呼び出せばよいと考え、該当のウィジェットの中身を見ていましたがさっぱり分からず。WEBを徘徊してみても、なかなか良い情報はありませんでした。

結局出力されるウィジェットのタグが分からず、出力される場所自体のタグを無理矢理利用しました。無茶な方法ではありますが、ウィジェットの入れ替えも簡単ですし、触るのは記事内の表記のみという簡単さです。

最終手段ではありますが、どうしてもウィジェットを記事に埋め込みたい場合には有効な方法かも知れません。

URLにドットをつけてできあがり

2011-09-29T11:04:00.002+09:00

先日クライアントさんにアドレスについて質問を受け、間違いを指摘した時に気付いた事です。まごうことなき小ネタです。

背景

あるサイトにアクセスしたいけれど、アクセスできないのだとメールで相談を受けました。これは単純にアドレスの記載ミスを指摘して終了でした。が、その際の間違いアドレスの最後に「　.　」（ドット：以降ドットと書きます）が入っていまして。

何気なくドットを付けてURLを叩いてみたら...目的のサイトのURLがドット付きのままで表示されました。たとえばこのブログだと「http://cubismer.blogspot.com.」でアクセスし、入力したままのアドレスで表示されます。

調査、というほどでもなく

この件をツイートすると@pacificusさんにツイートいただけまして、色々と記号を試していただけました。伺った範囲ではドット以外はダメだそうで。目的のサイトにアクセス出来ません。

私自身も何か試してみようといくつか打っているうちに「。」（読点）を何気なく入力しました。すると、かってにドットに変換されて前述のドット付きの状態のURLで表示されました。

twitterで情報をいただいて

そうこうしているうちに@valid_seoさんから以下の様なツイートをいただきました。

@valid_seo:2011-09-28 16:17:41

@Cubismer @pacificus DNS上だと最後の.はルートだから、そこからきてるんじゃないですかね？CNAME設定する時は、cname www.valid-seo.biz. って設定した気がします。

@valid_seo:2011-09-28 16:33:16

@Cubismer @pacificus え、あ、いや、PCのディレクトリと一緒ですよ。ドメインの場合はドットが区切り文字なだけ、ということかと・・・。

しっかり理解できていないのですが、根拠のあることのようでした。

結び

普段試す事すら考えない事柄でしたから、意外と面白かったです。書き間違うにしろ、最後にドットをつける間違いはまったく意識にありませんでしたので。

想像だにしない簡単な間違いが意外な結果を生むのだと実感した次第です。と、まとめるしか無い小ネタ記事でした。たまには、こういう記事もいかがでしょう？

試作。動く写真のようなGIFアニメーション。

2011-09-27T06:19:00.001+09:00

GIF動画を試してみたのですが、地道にやらないとだめなようで作業に相当の時間がかかりそうです。なお、この記事には実験でつくった動画を複数置いてますので、閲覧の際はご注意ください。

なお、画像の下にpicasaアルバムへのリンクを張っています。動きがおかしい時は、クリックしてリンク先でご覧下さい。

趣旨

先日目にした記事『写真が動く！gifアニメーションコンテスト！』やそれ以前にちょくちょく見かけた記事をみて、写真のようなGIFアニメーションが面白そうだと思っていました。

そんな中、最近練習に使えそうな動画が撮れたので早速実験してみました。が、後述しますがこの動画の選択が間違っていた気もしています...。

素材動画

元々の画像はNikonD5000で撮影した1分程のAVI形式の動画です。この動画をFinalcut Express』に取り込み、約10秒ぐらいになるように切り抜きました。

最初の方法ではMOV動画として切り出し素材としました。切り出したMOVのサイズは264KBほど。後の方法は動画ではなく静止画で切り出したので、もととなる動画のサイズはありません。

動画を簡単にGIFアニメーションへ

動画サイズ約6,600KB　picasaで見る

動画サイズ約7,800KB 　picasaで見る

素材の動画を『Finalcut Express』短く切り出しサイズを小さくしてMOV形式(264KB）で書き出しました。それをそのままGIFアニメーションに変換出来るソフトに入れて作成。手間もかからず簡単でした。

GIFアニメーション化のために使用したのはフリーソフトの『GIfBuilder carbon』。このジャンルでは有名なソフトだそうです。私のMacOSXでも使えました。なお、OptionのFrame Expantionにチェックを入れると少し綺麗に書き出せるようです。

完成度は...見たままです。目標にしていた状態には程遠いと言えます。更に言えば、書き出し後のサイズが大きすぎました。

写真を切り出し一枚一枚加工してGIFアニメーションへ

調べた結果、動画から静止画を切り出して作る方法であれば綺麗にできそうだと分かりました。

そこでFinalcut Expressで動画のコマを少し進め、一枚一枚静止画を切り出しました。手持ちのソフトを考えると、一番やりやすいかなと判断したためです。

切り出した静止画をFirewoksに取り込み、ステート（映画のコマのようなもの）に配分。

必要な部分ではない背景を一枚づつ削除。基本となる画像を背景として各ステートの一番下に配置。最後にGIFアニメーションで書き出して完了。

これが正しい方法なのかどうなのか疑問に感じつつ、非常に時間がかかる作業でした。

完成した動画

以下が完成した動画です。欲を出して最初のサンプルより大きくしました。書き出し時の設定により、見栄えとサイズが変わります。

設定：ディザ無し／アダプティブパレット／256色　サイズ：約1,300KB　
picasaで見る

設定：ディザ100%／アダプティブパレット／256色　サイズ：約2,000KB　
picasaで見る

ディザ100%にすれば、綺麗にできあがるようです。しかし、『写真が動く！gifアニメーションコンテスト！』の記事の動画サイズは1,000KBもありません。やはり作り方が違うのではないかと思っています。

設定：ディザ無し／モノトーンパレット／256色　サイズ：約500KB　
picasaで見る

設定：ディザ100%／モノトーンパレット／256色　サイズ：約584KB　
picasaで見る

白黒のモノトーンにすると見栄えも綺麗でサイズも小さくなります。写真の加工の時に一部に色づけなどをすればいい雰囲気になりそうですし。

picasaで見る

おまけで、背景を削除したままの状態です。下に背景付きの写真を敷く前提だったので、荒く切り取りしています。
背景を透過しているので、包含要素に背景画像を敷くと素材として使えるものができるかもしれません。が、気を抜くと昔っぽいデザインに見える危険性もありそうです。

反省点

冒頭に書きましたが、そもそもの間違いは動画の選択かもしれません。
何となく色数が少ないのがいいと思い背景をぼかして撮影しましたが、GIFはグラデーションが苦手なのを忘れていました。背景がもっとはっきりしていて、かつ色数が少ないと結果は違っていたでしょう。

手法の点でも、今回使った方法が正しいとはあまり思えません。相当の時間がかかりますし、そもそもできあがった素材のサイズが大きすぎます。見切り発車ではなく、もう少し情報を集めてから作業に入れば良かったかもしれないと後悔しながらの作業でした。

動画より写真

連続シャッター機能がしっかりしている一眼レンズデジタルカメラの中級機以上であれば、最初から連続写真を用いるほうが早いはずです。

水滴や飛沫などはシャッタースピードによって形状が変わるので、より面白いものが作れるかもしれません。その分、作業は恐ろしく大変そうですが。

結び

うまくできればデザインに利用しようと思っていましたが....。前述の様な出来映えの素材を作成するだけで一苦労でした。

GIFアニメーションが複数必要になったり、完成後に微調整が必要な可能性を考えるとおいそれとは利用できません。最適な動画を準備し、手間のかからない手法を用いればまだ何とかなりそうなので、また時間を見つけて挑戦しようと思います。

　　　