コヤツキinfoをリニューアルしました

2014年に制作してから、ひどいデザインのまま放置していた「コヤツキinfo」をようやくリニューアルしました。

コヤツキinfoとは

コヤツキinfoは、WordPressというオープンブログシステムを使って作成されたホール・劇場管理者のためのWebサイトです。
多目的ホールにいたころ、松村電機製作所製のF153という調光卓の使い方とホール管理の知恵袋についてのサイトを作りたいと思い、Bloggerで”でんきくらげの巣”というブログを書いていました。それから、Web制作に関わる機会が出来た2014年にWordPressを知り、手探り状態でコヤツキinfoというサイトを作成しました。

下の画像はスクリーンショットは残っていないので、作成したIllustratorデータです。
コヤツキinfo

ユーザーの事を考えていないデザイン

フラットデザインという言葉に釣られて見よう見まねで作ったデザイン。そして、ネットで調べたりサイト作成経験のある知人に書いてもらった冗長過ぎる汚いコード。
まったくユーザーのことは考えておらず、自分がこうしたいということだけで作り上げました。

その時の記事:F153のサイトを作ったよ

出来上がったサイトは、まず動線が非常に悪いものになりました。いちおうカテゴリー別のページは作りましたが、記事のメニューとかページとか全く付けていないので、他のページには行きにくいのです。
記事のデザインは、見よう見まねで画像とテキストを横並びにしたりしてみましたが、余白とかぜんぜん考えていないからごちゃごちゃして見えます。
でも、当時のくらげにはそれ以上どうしようもできなかったのです。

コーディングにもう一度挑戦

リニューアルについては、去年の時点でデザインを作り直していたので、コードを組むのは外注に出そうと考えていました。
しかし、会社でコーディング(コードを組んでサイトを構成していくこと)を習い始めたのをキッカケに、もう一度自分で作ってみることにしたのです。

12月頃からコツコツとコードの書かれたファイルを書き直し、うまく動作しなくては書き直す繰り返し。でもやっぱり、知らないで書くのと理解してから書くのは全然違います。自分で考えたデザインでちゃんとサイトが動いたときの感動はたまりません。

そうして、ようやくサイトのリニューアルができました。
画像クリックでサイトに飛べます。
コヤツキinfo_new

今回リニューアルしたところ

  • トップページを刷新
    非常にわかりにくかったトップページを、サイトっぽいデザインに変更しました。さらに、画像を使ってどんなサイトか一目でわかるようにしています。さらに、メインの大きな画像は3枚の画像を順次表示させるようにしています。コンテンツはシンプルな構成にしています。下の方には、新着情報を記載しました。
  • 画像をストックフォトから購入したものを使用
    今回、画像は操作説明図以外と一部を覗いてフォトストックサイトのPIXTAFotoliaから購入して使用しています。
    やっぱり、サイトにはきれいな画像を使ったほうがサイトが引き締まります。
  • 記事ページを2カラム(縦2列)に変更
    リニューアル前は1カラムにしていましたが、別の記事へ移動してもらいやすさを考えて、新着記事と関連する記事を表示できるように変更しました。また、サムネイルという小さな画像も表示させて見やすくしました。
    さらに、このブログへのリンクバナーも貼っています。
  • お問い合わせページの設定
    もともと、リニューアル前にもお問い合わせページは存在していました。しかし、テスト投稿してみてそもそもお問い合わせメールを受け取る設定をしていなかったことが今日判明。受信設定をしたので、これでようやくお問い合わせを受け取れます。>/li>

  • 書きかけて放置していた記事の更新
    書こうと思っていて書いていなかった記事を更新しました。とくにF153なんて離れて一年半も経つから思い出すのが大変です。
    さっさと更新しておけよと、当時のくらげを呪いました。
  • コヤツキinfoをよろしくお願いします

    リニューアル公開はしましたが、引き続き細かいところの調整していきます。記事の更新に関しては、いろいろ書きたいことがまとまってきたので、ぼちぼち更新していきます。
    そんなわけで、リニューアルしたコヤツキinfoをよろしくお願いします。

6 Comments

kenzo

SECRET: 0
PASS: 74be16979710d4c4e7c6647856088456
今っぽくなりましたね~
内容は良くわからない&デザインにも詳しく無いのでアレなんですが、各記事のタイトル・画像・文章(最初の3,4行)が記載されているかと思いますが、「続きを読む」というリンクがあったほうが良さ気じゃないですかね。
パッと見た時に違和感感じました。
・・・と文章が途中まで、でも「続きを読む」が無い、画像クリックするのかな?違う、そうかタイトルをクリックか
初回こんなアプローチになりました。

返信する
そらいろくらげ

SECRET: 0
PASS: 74be16979710d4c4e7c6647856088456
kenzoさん
いらっしゃいませー。さっそくご訪問頂きありがとうございます。
記事へのリンクは確かにわかりにくいですね。画像にリンクも今後は貼る予定ですが、続きを読むボタン作ります。

返信する
ゆうき

SECRET: 0
PASS: 74be16979710d4c4e7c6647856088456
すごくサイトっぽくなりましたね~☆
これは照明に寄った感じで運営していくんでしょうか?コヤツキ全体にしちゃうと大変なんじゃ・・・舞台も音響も照明も曲者ばかりの世界ですから…
ちなみに新人や学生をたくさん教えてきた僕の経験からの意見ですが…
3段マニュアルのみ卓から記憶卓へと進む人はもうほとんどいないので、若手にはちょっと難しい解説になっていると思います(^-^;
多くの若手はグランマとかパールとかの扱いに慣れた後で就職や、現場辞めてコヤツキになるのが現状ですので…
古い小屋のベテランさんや、仕方なく劇場管理している市の職員さんを読み手に設定しているのならわかりやすいと思います!

返信する
そらいろくらげ

SECRET: 0
PASS: 74be16979710d4c4e7c6647856088456
ゆうきさん
いらっしゃいませー。ええ、前は全然サイトっぽくなかったです(-_-;)
舞台と音響に関しては、今後寄稿者を募るとかなんとかする予定です。というかドメイン(サイトアドレス名)取っちゃったからいまさらサイト名を変えられないという事情もあります。
首都圏の専門学校や大学ですとそういう傾向かもしれません。たまにメールいただくことあるのですが、3段プリセット卓から記憶卓に移行するにあたりF153になったので一から覚えるという方がいらっしゃるので、あえて3段プリセット卓のことを書いています。
意外とまだまだ3段マニュアルはところは多いですからね。若手が3段マニュアル卓のあるホールへの配属もまだ十分ありえますし、外部で入ったホールで3段マニュアル卓を使わないといけないこともありえます。

返信する
みかんうさぎ

SECRET: 0
PASS: 14e1b600b1fd579f47433b88e8d85291
あけましておめでとうございまーす。
今年も新成人が程良くあばれているのを
ほのぼのと見てました。
小屋の物を壊したら大人の責務として
弁償させてやりますよと…ほほ(微笑)。
コヤツキinfo、綺麗になっちゃいましたね。
真面目に一度全部通しで読もうと思いつつ、
日々の雑務であまり読めてません。
ただ見やすくなったなとは感じます。
あとできれば備品の修繕修理や、
掃除などの日々のメンテナンス方法の
項目もあるといいなと、ふと思いました。
ではでは今年もよろしくお願いします。

返信する
そらいろくらげ

SECRET: 0
PASS: 74be16979710d4c4e7c6647856088456
みかんうさぎさん
いらっしゃいませー。今年もどうぞよろしくお願いします。
くらげは成人式の関係をやったことがないんですよね。おかげで成人式は平和に過ごしていました。
コヤツキinfo、きれいになっちゃいました。備品の修繕修理や掃除などは今もうほとんど覚えていないし写真を撮る機会もないので、寄稿を募りたいくらいです。みかんうさぎさん、いかがですか?

返信する

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください