読者です 読者をやめる 読者になる 読者になる

LITERALLY

知っておくと楽しい知識をまとめて紹介

どのブログよりも分かりやすく読み手にやさしいサイトを作るために

デザイン

f:id:tsukuruiroiro:20170122003254p:plain

12月に『サルワカ』という色々なことを分かりやすく解説するWebサイトを作った。記事も充実してきたことだし(Photoshopの解説記事ばかりだが)、サルワカについて改めて紹介したい。

 

1. サイトコンセプト

サルワカでは、次の8つことを大切にしている。

  1. 分かりやすさファースト
    専門的な内容についての記事でも、専門知識がない人が見ても分かるように解説する。
  2. 図、イラスト、画像を多用
    文字は補足程度におさえるのが理想。
  3. 読みにきた人を騙さない
    本当におすすめできるものへの広告しか貼らない。
  4. 読みにきた人をイラつかせない
    派手なアニメーションなどは入れない。広告は最小限。
  5. 読みにきた人が求めている長さの記事を書く
    無理やり長文にしない、また無理やりバラバラにもしない(サルワカでその内容に関する知識が手に入り、検索をやめられるのが理想)。
  6. 読みにきた人を置いていかない
    今何の話をしているのか常に分かるようにする
  7. 読みにきた人が疲れない配色・レイアウト
    派手な色使いはしない
  8. カテゴリ別の目次ページの作成
    各カテゴリーの記事が増えてきたら、探しやすく読みたくなるような目次ページをそれぞれ作る。 

とにかく読みにきてくれた人を大切にする。

世の中の大半のブログやWebメディアが、「お金儲けのために本当はちっとも良いとは思ってないものを宣伝している」、あるいは「広告を目立つところに置き収益率を上げようとしている」、あるいは「広告単価を上げるためにPV数を伸ばす不自然なサイト構成にしている」あるいは「無理やり自社のサービスに誘導しようとしている」中、

読みにきた人に気持ちよく過ごしてもらえるサイト作りをすることには大きな価値があるのではないかと思っている。まだ訪問者数は多くないが、そう信じてコツコツと記事を更新している。

 

2. Webデザインを0から70くらいまで学べるようにする

現状サルワカの記事の大半はPhotoshopの使い方に関するものだ。ユーザー層を絞ることになってしまうが僕にはどうしてもやりたいことがある。それは、サルワカだけで、無料でWebデザインスキルを「ゼロ」から「仕事が請けられるレベル」まで習得できるようにすること。

Photoshop、Illustrator、HTML&CSS、軽くJavascript、PHP、Wordpress。これらをゼロから効率良く学べるWebサイトにしていく。また、その中で基本的なデザインセンスみたいなものも身につけられるようにする。最終的にはサルワカで学んだ知識があれば、立派なWebデザインやグラフィックデザインが作れるようになる。

手始めにPhotoshopの記事を充実させた。コンテンツもずいぶんと充実してきたので、以下のような目次ページ(カテゴリーページ)も作った。

サルでも分かるPhotoshop講座

f:id:tsukuruiroiro:20170122003254p:plain

f:id:tsukuruiroiro:20170122003305p:plain

f:id:tsukuruiroiro:20170122003309p:plain

f:id:tsukuruiroiro:20170122003312p:plain

f:id:tsukuruiroiro:20170122003315p:plain

上から記事に目を通していけば、Photoshopを触ったことがない人でも十分な知識を身につけることができる。手前味噌だが、どのサイトよりも、どの本よりも分かりやすく解説がされているんじゃないかと思う。

 

キーになるのは、コンテンツ同士のリンクだ。PhotoshopにしてもHTML/CSSにしても様々な内容が深く関わり合っている。今何についての話をしていて、予備知識は何なのかをハッキリさせることが大事になる。

プログラミンやデザインソフトの解説書にはどうしても苦手なことがある。それは、Aという内容を理解するのにBの知識がいるときに「Aを理解するにはBの知識が必要になります。Bはこちらで勉強できます」いうようにとスムーズに繋げることだ。

紙の書籍でも「何ページを参照してください」というのはできるが、参照するのが結構な手間になる。それにありとあらゆる内容を1冊の本に詳細に書けば、おそろしく分厚くなってしまう。

また、そんな複雑な内容を1つ1つ全て解説しながら書いていたらそこそこ知識がある人からすると「内容の薄い本」になってしまう。逆に基本的な知識を省いてしまえば、初心者にとっては「知らない単語ばかりで役に立たない本」になってしまう。

サルワカではコンテンツを十分に増やしながらも、レベル別の記事を作り、それらをうまくリンクさせていく。初心者向けの記事を充実させつつ、中級者向けの内容を書くときも、つまずいてしまった人向けのフォローを常に入れるようにする。「分からなかった方は、こちらの記事を読んでから戻ってきてください」というような具合だ。

とにかく様々なレベルの人が、ストレスフリーにハイレベルまで学べるような記事構成・サイト設計にしていく。これが当面の目標。

 

3. サルワカの工夫

具体的にサルワカで工夫していることを少しだけ紹介する。これらのことが全て読む人のためになっているかは分からない。今後も改善は続けていく必要がある。

 

図や画像を多用

f:id:tsukuruiroiro:20170122171835p:plain

視覚的にパッと分かるように図をたくさん使う。文字の説明は、吹き出しに入れることで「この文字がどの図・画像についての解説なのか」分かりやすくしている。

 

サイドバーには目次だけを固定

f:id:tsukuruiroiro:20170122172441p:plain

少しスクロールするとサイドバーに目次が固定される。目次のタイトルをクリックすることで読みたい内容へとスキップができる。サイドバーには関連記事などは表示せず目次だけ。読む人の集中をなるべく阻害しないようにしている。

 

ヘッダーに現在のセクション内容を表示

f:id:tsukuruiroiro:20170122173429p:plain

記事を読んでいると、ヘッダーに現在読んでいるセクション内容がうっすらと表示される。図をたくさん使っているため、どうしても記事が長くなり今何の話をしているのか分かりづらくなる。対処法として色々検討した結果、ヘッダーにさりげなくセクションの内容を表示することにした。ただ、目障りにならないように色は控えめ・文字は小さめにした。

 

見ていて疲れない配色とレイアウト

f:id:tsukuruiroiro:20170122175244p:plain

配色とレイアウトは、なるべく見ていて疲れないものにすることを心がけている。ただ、この点については今後も大きな改良の余地があると思っている。

 

まだまだ至らない点は多々あるが、サルワカをもっと多くの人に読まれる価値のあるものにしていきたい。

どうぞサルワカをよろしくお願いします。

⇒よかったらサルワカ君(@saruwakakun)をフォローしてやってください。