私は5年ほどプログラミングの経験があるのですが、マークアップ言語って凄く難しいですね。で、それ以上にWebデザインは難しいです。とりあえずは、トップページを考えなければ、何も進まないので、レイアウトだけExcelでさらっと書いてみています。


え?どうしても見たいって?仕方がありません。
f:id:ryo021021:20140129161746p:plain


Webは完全にド素人なので、考えているのは、以下のような感じです。とりあえず公開して、人の意見等を聞きながら、ガシガシ改善していく方向で考えています。今はとりあえず走るだけです。

全体的なデザイン

私は決してデザインセンスが良くないので、なんとなく良いと思ったWebサイトをパクリながら、何とか形にしていこうと思っています。配色は、とりあえず白、黒、水色で清潔感のある感じでいこうと思っています。赤とか使っていきたいのですが、攻撃的なイメージになってしまいそうで怖いのと、一般受けするデザインが吉だと思うためです。


特に参考にしているのは、以下のWebサイト、書籍です。
アップル
WEB制作会社 (ホームページ制作会社) 東京 トリニティワークス
おしゃれなWebサイトテンプレート集



ヘッダー

プログラミング、啓発等、どの記事を見ていても表示するのが、上記スクリーンショットの3行目までの部分です。どのページからでも、トップページに飛べるように左上にトップページへのリンクのロゴを配置します。私ではロゴなんて考えることができないため、数少ない人脈を駆使して、サービスで書いてもらおうなんて企んでいます。


そして、Web検索等でコンテンツ自身に飛んできた人(ほとんどがこのパターンになると思っている)が、自分がどんなWebサイトに迷い込んでしまったのか分かるように、ロゴの横に2行程度のサイトの概要についての説明書きを配置しておきます。


それから、右上にサイトマップへのリンクや、コンタクト用のリンクを配置します。サイトマップは、以下をパクろう参考に作ろうと思っています。
Apple - サイトマップ



ドロップダウンメニュー

これが難しいのですが、トップページから他のコンテンツに飛ぶためには、ドロップダウンメニューを使用したいと思っています。以下のjMatsuzakiさんのブログのような感じです。
jMatsuzaki


メニューは、かっこつけて日本語と英語の二段表示にしようと思っています。これの元は、上述の書籍にコードがそのまま載っている(付属のCDに入ってるし)ので、容易く実現できます。「プログラミング」にマウスオーバーすると、「全般」「C」「C++」「Java」みたいな感じで、言語の一覧等が出てくるようなイメージです。


それらをクリックすると、もう各種コンテンツだったり、コンテンツの目次だったりに飛ぶようなことを考えています。コンテンツが増えるまで、凄く物寂しい感じになりそうです。メニューの内容は、まだ仮ですが、おおよそこんな感じでいきます。内容については、また別途ご紹介致します。



新着コンテンツ表示

もしかすると、こふぷろ!のファンが出来て、トップページをブックマークしてくださる方が、いらっしゃるかもしれませんので、新着の記事を表示しようと思っています。サイトを利用する方の目的は、それぞれでしょうからメニュー毎に分けようかなー、とかも考えています。


例えば、プログラミングやIT業界に興味がない人も、自己啓発だったりタイムマネジメントだったりのコンテンツは刺さるかもしれないし、少しユーザーの層を広げてみようなんて考えているのです。へっへっへ。



スライドイメージ

ここは深く考えていません。ごちゃごちゃさせたくないので、重たくならない程度に、メインコンテンツのイメージを貼っておくのが良い気がしています。他にもいくつか案を考えているのですが、ここはまだ検討段階ですね。最初は、とりあえず我が愛猫「こふ」の画像を貼って誤魔化すかもしれません。以下ページのカメレオンの画像みたいに装飾して。
WEB制作会社 (ホームページ制作会社) 東京 トリニティワークス




あと公開するまでの課題として考えているのは、スマホ対応、ソースコード掲載の方法です。スマホ対応に関しては、とりあえず諦めようと思っています。啓発系のコンテンツであれば、テキストだけで楽しめるので、スマホ対応していた方が良いと思うのですが、プログラミング関連のコンテンツであれば、恐らくPCで見るユーザーが大多数だと思うので、将来の課題として今は放っておきます。


美しいコードを美しく掲載するためには、何かしらの工夫が必要です。定番なのは、SyntaxHighlighterを利用することだと思うのですが、少し好みではないのです。


本当は自作したいところなのですが、今のところそんな技術は持ち合わせておりませんので、以下のものを拝借できないかと思っています。近々コンタクト取れたら取ってみようと思います。
シンタックスハイライトする為のプログラム作ったった - プログラムdeタマゴ


それから全ページにフッターを付けて、サイトの概要を書いた記事に飛べるようにし、記事の信頼性が上がるかもしれないので私の顔を載せて、軽い自己紹介みたいなものを書いたり、facebookのページ等を作って、そこへのリンクを載せたり等しようかと考えています。Web制作を始める上でお世話になった、以下のブロガーさんのように。
Webデザインレシピ




そんな感じで、ド素人なりに試行錯誤しながら着々と進めております。以上、こふぷろ!の進捗状況報告でした。こういう記事を書いておくと、後から見直すと感慨深いものがあるかもしれません。あとは「へー、結構面白そうじゃん」と思ってくださる方を探したり、アドバイスを下さる方が現れたり、そんな甘いことを期待しているという汚い考えもあります。こういう汚い考えだって、私は正直に言います。


とにかく、自分の考えていることは、できるだけ外に出すようにしておきたいのです。別に人に知られて、盗まれたりするものでもありませんし、オープンにやった方が、応援してくださる方も現れるし、「こいつ本当にやる気あんの?」と見限られる可能性も減りますし、アドバイスを下さる方が現れるかもしれませんので(しつこい)、良いこと尽くしだと思うのですよね。まあ、そんな感じで、こふぷろ!進めていきます。


ではでは。