Tagged

openwebdesign

A collection of 22 posts

openwebdesign

今月のデザイン変更点

昨年8月に「記事ページのアクセス通信簿 [http://www.yasuhisa.com/could/diary/report-on-article-design/] 」と題して記事ページのデザインの変更の意図とその効果について解説しました。その後、いろいろ機能を追加して模索をしているのですが今月が大きな機能が幾つか追加されたのでその紹介も含め、効果と課題について紹介していきます。 次に繋げるための工夫 まとめ系記事を除いて、記事は非常に高い割合で最後まで読まれている場合が多く、滞在時間も長いです。コンテンツの質も月ごとで若干異なるのでなんともいえないですが、今月は直帰率も低かったので読者が滞在してくれた月といえるかもしれません。 しかし、このサイトは検索やソーシャルメディアなどを通じてサイトにアクセスする方が多いこともあり、一期一会の関係で終わってしまう場合が多々あります。平均ページビューを増やすにはどうにかしたらいいのか、どのサイトも頭を悩ませているかと思います。たくさん選択肢を与えればクリックするわけでもありませんし、メインコンテンツ (記事) の邪魔をしていたら逆効果です。

openwebdesign

記事ページのアクセス通信簿

今のような記事ページになった理由 今年の始めに記事ページを新しくしました。そのあと小さな調整を行ったり機能を追加はしていましたが、そろそろどのような結果が出たのが発表するには良い時期だと思いますので幾つか紹介したいと思います。 ご存知の方もいるかもしれませんが、今「記事」と呼ばれるエントリーはほとんどすべてレイアウトが違います。中には色を変えただけのものもありますが、レイアウトが少し複雑なものや画像が活用されているものもあります。凝り過ぎたことをすると読み難くなってしまいますが、毎回見た目が新鮮なので飽きることもありませんし、それがキッカケで読んでくれる方もいるかと思います。 最近、海外ではこうした記事ごとにレイアウトを変えるという手法が増えて来ていますが、私は10年近く前に同じようなことをしていました。当時は CMS もなく、ひとつひとつ HTML で書いていました(アーカイブページのリンクまで手書きで調整していたわけですから、今考えると信じられない手間ですね)。学生で時間があったということで日記を書く度にレイアウトを変えていましたし、場合によっては Flash も利用してい

openwebdesign

404ページのデザイン提案【後編】

このエントリーは「404ページのデザイン提案」の続きにあたります (前編 [http://www.yasuhisa.com/could/article/designing-404-1/]) (中編 [http://www.yasuhisa.com/could/article/designing-404-2/])スケッチをすることでページの大まかな形が見えてきたところで、早速コーディングに入りました。404という1ページの課題なので、そうしているというのもありますが、最近は Photoshop とかでビジュアルを固めないままマークアップを記述することがあります。結局ブラウザで表示される状態でないと分からないこともありますし、骨格の状態から徐々に色や雰囲気を加えて行く作業は結構楽しかったりもします。構造への意識もしやすいですし、この時点でまたレイアウトを吟味出来る機会があるという意味でもメリットがあると思います。こういう作り方をしているので、ブラウザのデバッグツールが充実しているのは非常にありがたいです。 すべての案件でそうしているわけではないですが、今後はそうしていきたいですし、素早く

openwebdesign

404ページのデザイン提案【中編】

このエントリーは「404ページのデザイン提案【前編】 [http://www.yasuhisa.com/could/article/designing-404-1/]」の続きにあたります。なぜ 404 ページが表示されたのか、そして利用者が出来る次のアクションが何かがみえてきました。これからいよいよ大まかなレイアウトのスケッチに入るわけですが、もうひとつ考えておきたいことがあります。ページに表示させたい項目だけでなく、必要でないと考えられる要素も洗い出しておくと、スケッチが最初の段階からある程度洗練されたものになります。 通常のページでは必須項目でも目的が絞られてるページだとそうではない場合があります。「あっても良い」「もしかすると誰か必要になるから」くらいの要素は目的が絞られているページでは省いてしまっても良いと思います。要素を最小限に絞り込むことで、ページで伝えたい目的がより明確になるでしょう。サイト内のリンクからで 404 が表示される割合より、サイト外からのアクセスで 404 が多く表示されています。そこで、サイト内でいろいろ読みたいけど行き詰まった人というよりかは、読みたい

openwebdesign

404ページのデザイン提案【前編】

Twitter [http://twitter.com/yhassy/status/4492566304]のほうでひっそりと告知しましたが、404ページ [http://bit.ly/z8X7x] のデザインを変更してみました。なぜこんなところから始めたのかというと、サイト制作でいつも後回しになってしまう部分なので考えてみたかったですし、1ページ完結型なので早く形に出来るというのが理由です。いわゆるエラーページなわけですが、「見つかりませんでした」という結果表示ではなく何か補助出来ないかというのがテーマでした。 機械的なエラーの表示の仕方はケアが必要です。多くの利用者はエラーをみると、たとえシステムエラーでそうなったとしても、自分のせいにしてしまう場合があります。メッセージの出し方によっては「何か誤操作をしてしまったか」「そもそも何が起こったの?」「もしかして壊した?」といった感情を引き出してしまう可能性があります。利用者が悪くないのに、悪いと突き出してしまうような見せ方だけは避けなくてはいけません。 専門用語を使ったり、簡略化過ぎるエラーの説明もよくありません(説明抜きにしておも

openwebdesign

リンクタイプの進行状況

この記事は「リンクタイプの構成案 [http://www.yasuhisa.com/could/article/wireframe-for-links/] 」の続きにあたります。 [http://www.flickr.com/photos/yhassy/2553286294/] とてつもなく間が開いてしまいましたが、忘れてしまったとか飽きてしまったというわけではないですよ。他のことを書いたりしているとついつい後回しになってしますね。徐々にまたスピードを上げて行きますのでよろしくお願いします。 さて、リンクの構成案は随分前に出来上がっていたのですが、肝心の実装を進めていなかったので初めて見ました。途中経過ですが、どんな感じで進んでいるのかをこの場で共有したいと思います。作る前にリンクタイプには以下のような条件項目を挙げました。 * リンクのリストは <dl> で構成。 <dt> にサイト名、<dd> に簡単な説明文を書く * スクリーンショットを入れたい * マウスオーバーしたときのエフェクトを工夫したい * メンテナンス・拡張性を考えると面倒な作業や特殊なマークアップルール

IA

リンクタイプの構成案

可能な限りフィードバックを得れるような状態にしながら、徐々に方向性を固めて組み立てれるように複数のサイクルで構成されたプロセス [http://www.yasuhisa.com/could/article/multiple-cycle-process/] を提案しました。今回はその第一弾である「リンク」タイプのデザインに取りかかろうと思います。リンクは「クラフトっぽいアート作品いろいろ [http://www.yasuhisa.com/could/links/craft-art/] 」のようにゆるいテーマがあるかもしれないですが、リンクが羅列しているようなエントリーのことを指します。 このタイプのエントリーはあまりブックマークもされることもなく、どちらかというと検索からくる方のほうが多いです。サイトへのロイアリティもあまり高くないので、最近のエントリーやタグリストなどといった全体像が分かるものを省いて、読者が必要しているものをはっきり見せることが必要とされるタイプになります。リンクタイプはイントロダクションのような文章もない単純なリスト( <dl> で記述)なので、文体も統一されてい

openwebdesign

ブログの向こう側にある会話を追う

この記事は「ブログでの会話を見えるようにするには [http://www.yasuhisa.com/could/article/blog-conversation/]」の続きにあたります。 従来オンライン上の会話は一元化されていました。例えばフォーラムや掲示板で会話を始めるためのネタが挙り、それに対しての反応がその場に連なっていました。ブログが使われるようになると、フォーラムでの会話だけでなくブログを中心とした会話もスタートしました。簡単にブログを設置することが出来るので会話が一カ所ではなく数多くの場所で発生するようになったものの、ブログにあるコメントやトラックバックによってなんとなく繋がり合っていました。また、 Technorati [http://www.technorati.jp/]やGoogleブログ検索 [http://blogsearch.google.co.jp/] を利用してある程度、会話を追うことも可能です。しかし、現在はさらに会話を追うのが難しくなってきています。 今はブログより気軽に自分の意見を書き込む場所が数多くあります。Livedoor クリップ [http

IA

サイドバーの行方

サイドバーはブログが広まる前から存在していたコンポーネント。メインコンテンツ以外の情報を上部に載せることが出来るので、多くのサイトでサイドバーが採用されています。実装も簡単に出来ますし、3カラム、4カラムと増やすことも出来るわけですが、実装の敷居も低いのでただの賑やかしになってしまいがちの部分でもあります。情報の配置の仕方によって、情報が活かされるときもあれば、そうでないときもあります。サイドバーもメインコンテンツ以外の情報を放り込む場所ではなく、的確な情報が載る場所として扱わなくてはいけません。 ブログのサイドバーで必要なもの サイドバーによくある情報は * 最近のエントリーリスト * 最近のコメントリスト * アーカイブリスト * カテゴリリスト * タグクラウド * Feed をはじめとした購読ボタン * ウィジェット諸々 アクセス解析やサイトコンセプトによってサイドバーの使い方も変わってきます。このサイトは Feed は多くの方に登録されていますが、サイトまで訪れる方はその中のわずかな数ですし、エントリーによってアクセス数も数倍違うこともあります。よって、情

openwebdesign

複数のサイクルで構成されたプロセス

ブログエントリーをタイプ別に振り分け、どのような読者がサイトを訪れているのか漠然的ですがみえてきました。そして、ついにプロトタイプをそろそろ作って行くという段階に近づいて来たわけですが、ここでプロトタイプからテスト、もしくは公開までの進め方を紹介していこうと思います。 通常、上図のように分析、プロトタイプ、デザイン、コーディング、テストというプロセスが順に行われます。それぞれのフェーズにサイト全体を考慮しつつ進めて行くわけです。このプロセスは多くのサイト構築に使われていますし、特に問題もないと思いますが、別の方法も考えられます。特に様々なタイプのページが存在するところだと、全体を一気にデザインしたりコーディングするのではなく、細分化して進める方法もあると思います。 こうした進め方をするメリットは幾つかあります。 * 一部の機能やページに特化するのでフォーカスしやすくなるだけでなく、ビジョンの共有もしやすい * ひとつひとつ組み立てていくことで全体的な方向性も見えて来る可能性がある * 先に行われたサイクルが次のサイクルを進めて行く上で参考になるので、より洗練されていく *

IA

拡張性のあるデータ配置を模索する

そろそろ大まかな形でワイヤーフレームを作っていこうと思っているわけですが、その前にいろいろ準備しておきたいことも幾つかあります。そのひとつが、拡張性を考えて、どのようなデータをどの辺りに配置するのがベストかを考えること。これは Webアプリケーション開発において特に重要になってくることだと思いますが、大幅な改変をしなくても、機能やミニコンテンツといったコンポーネントを付け加えることが出来るように設計しておく必要があります。もちろん、すべての可能性を考慮することは不可能ですが、あらかじめ拡張されることを考慮して設計を始めるか始めないかでは大きな違いがあります。 下の図はページを大まかに4つに別けて、異なる配置を考えたものです。 ※ ワイヤーフレームの基盤のような存在なので、実際のサイトのワイヤーフレームを作っているわけではありません。 ナビゲーションサイトのグローバルナビゲーションに当たるエリア。Webアプリケーションにおいては機能を示すことが多いコンテキスト / データセット 現在観覧しているページがどういったページが示していたり、サイト全体からみたページの位置を示しているエリア。

openwebdesign

ブログでの会話を見えるようにするには

2005年なので少し前の資料になりますが、Noor Ali-Hasan という方がブログスフィアでどのように会話が始まってお互い繋がり合っているのかを調査した Analyzing the Social Patterns and Behaviors Associated with Blogrolls and Blog Comments [http://www.noor.bz/blogstudy/] という論文を発表しました。クウェート、アラブ首長国連邦、アメリカ・ダラス という異なる場所に住む 500人のブログと、それらに投稿されたコメント 4000通、サイドバーにある Blog Roll のようなリンク集を調べたそうです。 視覚的に表現されたもの [http://www.noor.bz/blogstudy/findings.html] もあるのでぜひ見て欲しいですが、論文で重要になってくるのが、場所や文化に関係なくブロガーは新しい人 (オフラインの世界で知らない人) と対話をする傾向にあるという点です。 試しに僕のサイトに投稿された過去 100以上のコメントから自分がまだ会ったこと

openwebdesign

コメントを残す8タイプの読者

「コメントリストで考えられるパターン [http://www.yasuhisa.com/could/article/commentlist-pattern/] 」では、ブログのコメントリストの見せ方から読者との関係を良いものに出来るかを考えて行きましたが、今回はもう少し突っ込んで読者にスポットを当てたいと思います。読者と一言でいってもブログに訪れる方は実に様々です。住んでいる場所も職種も年齢もすごく幅の広いです。それゆえ明確な切り分けは出来ませんが、コメントを残す方はある程度決まっていると思います。 もちろん人間なので、そのときのムードやちょっとしたことがきっかけで変化すると思うので明確な区別は出来ないですが、8つのタイプの方(もしくはモードになった方)がコメントを残したりコメントを残す可能性を秘めています。 友達・同僚 その人を個人的に知っているから読んでいる方も少なくないです。たとえ日常を書いた日記でもおもしろく読めるのは、文字だけでは伝わらない何かを読み取ることが出来るからかもしれません。今でも mixi 日記を書いたり読んだりするのは、この要素は大きいでしょうね。特に SN

openwebdesign

コメントリストで考えられるパターン

Webサイトの基本3要素 [http://www.yasuhisa.com/could/article/site-direction1/] のひとつである「Relationship」。ブログでは重要な部分ですし、例え企業サイトを構築する際にも重要な要素になっていきます(もちろんブログと同じ見せ方ではないですが)。ブログで最も簡単に関係を築く方法がコメントです。それぞれのエントリーにコメントフォームを置いて読者がいつでも感じたことを自由に書き込むことが出来るようにします。コメントを通じて筆者と読者の関係がより濃いものになるだけでなく、そのコメントを読む他の読者とも共感という間接的な繋がりをもつことが出来ます。 ひとつの窓口としてコメントは良い機能だと思いますが、不満点がないわけではありません。コメント数が長いと見た目が単調になり、読み難いという印象もありますし、多くの方に読んでもらうべき貴重な情報もコメントにあるがために読まれないというケースがあります。自分のサイトは自分が管理しているので気にはなりませんが、コメント数が多くページが延々と続くと読む気が失せることもあります。 貴重なコ

openwebdesign

手動と自動のバランスがサイトの質へと繋がる

カテゴリをエントリーのタイプと見なし、それぞれのエントリーに関するキーワードをタグとして書き込むという分類方法は多くの方にとってもしっくり来たといえるかもしれません。しかし、まだ考える余地が幾つかあるといえます。その代表格にあたるのが「 タグの役割を考えた見せ方 [http://www.yasuhisa.com/could/followup/role-of-tags/] 」でも話題になった「Follow-up」という分類。 Follow Up はサブタイプ > Toru [http://waviaei.com/]さん ArticleのFollow Upならば、ArticleとFollow Up。AnnoucementsのFollow Upならば、AnnouncementsとFollow Up。と言う具合に、両方にタイプ付けはどうでしょうか?個人的にはFollow Upは必要無いのでは? Toruさんが提案しているように、2つのタイプをチェックしておいたほうが良さそうです。また、「Follow Up」のリンクをクリックして、そのタイプのみを読むということはないでしょう。「Follow

openwebdesign

「マインドマッピングツール」としてblogを見る視点

この記事は「タグの役割を考えた見せ方 [http://www.yasuhisa.com/could/followup/role-of-tags/] 」の続きにあたります。とても重要な視点だと思うので紹介します。 > rssky.tblr* [http://rssky.tumblr.com/post/26235525]より ここら辺の事をもう一回徹底的に考え直してみることが、実は「blogの次」に繋がっていくのだと思う。ここにプラスして小川宏高氏のラディカルなまでの正論と、あとやっぱトロット夫妻のもうそれはそれは絵に描いたようなリベラル理想主義の部分をプラスして。 ヤスヒサさんに欠落しているのは「マインドマッピングツール」としてblogを見る視点、かな。(立ち位置をはっきりさせるためあえて除外してるんだと思うのだけど) あるいは”個人のマインドマッピング”がサイト、というかコンテンツとして成り立ちうるか、とか。 ツリー構造のカテゴリーと横断的連接のタグの相関関係を明確に見せる手法とセマンティック検索技術がうまく結びついた瞬間に”次のかたち”はそこに立ち現れるように思える。 実に鋭

IA

タグの役割を考えた見せ方

この記事は「カテゴリとタグを上手に使い分ける [http://www.yasuhisa.com/could/article/category-tag/] 」の続きにあたります。 カテゴリに関して迷っている方は少なくないみたいですね。前回、提案したブログエントリーをタイプ別に分類する提案をしましたが、それに対して様々な意見や感想が出ているので、ここで共有しておこうと思います。 > lilac [http://www.yasuhisa.com/could/article/category-tag/#comment-19]さん (カテゴリは) ふつうにいらないんじゃね?みたいな。明確に必要、という答えが出せないんですよね・・・ 他の方も書いていらっしゃいましたが、機能が提供されているからといって使わなければならないというわけではないと思います。無理にいろいろ使おうとするとかえって複雑化してしまうので、そういった場合は思い切って省くことも重要です。これはデザインするときには重要な考え方のひとつでしょう。 今回のようにカテゴリをタイプと見なして使うのは自分のサイトにはフィットしているように思

IA

カテゴリとタグを上手に使い分ける

CMS にタグというコンセプトが組み込まれる以前は「カテゴリー」はどういった情報がコンテンツに含まれているのかを示すものでした。例えば、Mac、映画、ライフハック、仕事といった具合だと思います。しかし、タグ機能が CMS に導入されるようになると、以前カテゴリ名として扱っていた名称 (キーワード) がタグへ移行していきました。 ここで課題になってくるのが、タグがコンテンツに含まれている情報を示すようになったので、カテゴリに明確に違う役割を示さなくてはならないところです。もし従来のように「Mac」というカテゴリを作ってしまうと、Macに関する情報が書かれたエントリーに Mac というタグを書き込むことは重複になりますし、管理する側もこれはカテゴリなのかタグなのかというのが分かり難くなり、記事によって異なる示し方になりかねません。 ブログエントリーとひとことで言ってもエントリーによって様々なタイプ (形式) があります。徒然と文章が書かれていることもあれば、リストだけで終わっているものもあります。どういったブログエントリーを書くかによって、文章の構成は変わりますし、場合によっては文体も

openwebdesign

サイトの方向性を考える (後編)

この記事は「サイトの方向性を考える (前編) [http://www.yasuhisa.com/could/article/site-direction1/] 」の続きにあたります。 これからのWebサイトを構築するときにおいて、サイト訪問者の「インタラクション」「体験」「関係」を無視して作ることが出来なくなってきています。サイトの目的や性質を考えてデザインするのではなく、サイトの目的や性質を反映する「インタラクション」「体験」「関係」を考えてデザインするだけでも完成したものは従来と違ったものになるでしょう。しかし、これら3要素を考えて構築作業を開始すればいいといえば、そうでもありません。 例えば、3要素を補う技術というものは既にたくさん出回っており、Web 2.0 と呼ばれるサービスがそのひとつといえます。サービスが提供するウィジェットや API を利用して3要素にあたる部分を補うことは出来ますが、ただ導入しただけではバランスの悪いものであったりしまし、それぞれの要素に負の影響を及ぼすことも考えられます。そこでコアとなるこれら3要素を繋ぎ合わせる重要な『部品』が必要になってきます。

openwebdesign

サイトの方向性を考える (前編)

> masayaさん [http://masaya.tumblr.com/post/25116801]のコメント でもそれをやるにしても最初にある程度方向性は示さないと難しいのでは? これは正に仰るとおり! コンセプトも何もない状態でいきなり「サイト作ります」では、表面的でつまらないサイトになるでしょうし、宣言する意味もないですね。何か方向性があることで、それを起点にしてあなたとの会話もしやすくなると思います。誰でも分かる明確な形として説明出来るかどうか分かりませんが、頭の中で描いているイメージを書いていきたいと思います。 これからの Webサイトにおける基本3要素 サイトを構築するにおいて、従来のように『ページ』や『サイト』という単位での考え方から脱するのがスタートになります。Webアプリケーションを構築する方にとっては当たり前の考え方だといえますが、これは中小企業のサイトを作る際にもいえることですし、今回フォーカスになるブログについても同じことです。もちろんページを実際作り上げて行く作業段階では『ページ』をこしらえていくわけですが、その前段階でそういった単位は不必要ですし、かえ

openwebdesign

このプロセスで何をオープンにしていくか

この記事は「オープン Web デザインを始めます [http://www.yasuhisa.com/could/announcement/open-web-design/]」の続きにあたります。コメント、Twitter [http://twitter.com/yhassy] 、ソーシャルブックマークなどを通して幾つかメッセージをいただきました。どういうものを目指しているのかを以前の記事で説明されていない部分があったと思いますので、コメントに応えながら説明していきたいと思います。 これはオープンソースということ? 「オープン Web デザイン」というフレーズを聞いて、オープンソースを連想された方は少なくないと思います。そう考えるとソースを公開してみんなで作るという感じになりそうな予感がしますね。 > DocSeriさん [http://b.hatena.ne.jp/entry/http://www.yasuhisa.com/could/announcement/open-web-design/] のコメント Wikiのような、何らかの無認証編集可能なシステムを利用して自由にCSSを編

openwebdesign

オープン Web デザインを始めます

去年の暮れから今年の始めにかけて Web デザインへの思いを書いてきました。その思いは「Web という媒体を理解した上でのデザイン [https://yasuhisa.com/could/entries/001211.php]」「Web デザインへの理解を深める [https://yasuhisa.com/could/entries/001210.php]」の2つの記事に集約されているかもしれません。これからも Web デザインへの興味は薄れることもないでしょうし、これからも続きになるような内容を書いていこうと思いますが、ここでひとつ問題があります。 掲載しているサイトのデザインがコンテンツに耐えられなくなって来ているという問題です。 コンテンツを反映しているサイトへ 長い間、このサイトを読んで下さっている方はご存じだと思いますが、以前のデザインは 3年半前に作ったものです。当時はそれで良かったかもしれませんし、そのときにはあまり見かけなかった情報の配置や見せ方をしていたと思います。しかし、今となっては使い古されたものですし、機能面や使いやすさは貧弱としか言いようがなかったといえま