JUSO Coworkingのウェブサイトを2年ぶりにリニューアルしました

深沢幸治郎

6年前

私はフリーランスのウェブデザイナーですが、同時に2010年に始めたコワーキングスペース「JUSO Coworking（十三コワーキング）」の運営者でもあります。先日、3度目のリニューアルがリリースされましたので今回はそのご報告です。

JUSO Coworking 大阪・十三のコワーキングスペース・レンタルスペース

ひきつづきa-blog cmsを使ってます

2011年〜2016年までWordPressをつかって同スペースのサイトを構築していたのですが、2年前から有限会社アップルップルさんの「a-blog cms」をつかっています。

a-blog cms 導入実績3,000件以上の国産CMS

動機はほぼ毎月のペースでアップルップルの社長である山本さんをはじめ、多くの方が名古屋からおいでくださりa-blog cmsの勉強会を開いてくれているご恩半分、WordPressとはまた異なった文脈のコンテンツ管理を実際に自分のサイトで試してみたいと思ったことが半分。

ただ2016年のa-blog cmsへのリニューアルに関しては基本的にアップルップルさんが運営されているコワーキングスペース「ベースキャンプ名古屋」の開発済みテーマを融通していただき、それに合わせてJUSO Coworkingのウェブサイトを作る、という流れで実現しました。

このテーマ、当時のデフォルトテーマをベースにa-blog cmsのエキスパートたちによってカリッカリに拡張・カスタマイズされており、1年回してみてやはりイチから自分でテーマを作る経験をしてみないと基本的なところって分からないままだよなと思い、昨年夏に自分で設計・デザインしたものにしようとワイヤーフレームを書き始めました。

それからようやくデザインの大まかな完成まで半年、コーディングにまた数ヶ月かかってしまいました。どうしても自社プロジェクトの優先順位が下がるのは　やむをえないことではありますが…さすがにちょっとかかりすぎましたね。コーディングが終わってからはテーマ開発が楽しく、また先日のa-blog cms勉強会でアドバイスを賜われたこともあってものの一ヶ月もしないうちに公開までこぎつけたのですが。

a-blog cmsの面白いところ・便利なところが発見できたので、近いうちにこのブログでまとめたいと思ってます。

ページ構造を見直しました

a-blog cmsのURLツリー構造は基本的にページをカテゴリごとにまとめ、カテゴリ内の記事一覧から目当てのページを探すという流れに従い

http://example.com/(Category)/(entry-name).html

という構造を取ることが多くあるのですが、ページ数がそれほど多くない場合はカテゴリを用いずに

http://example.com/(entry-name).html

としたほうがよいなと思っていました。WordPressにおける固定ページのようなエントリを司る親ブログについてはこの方針で、ブログとイベントを司る子ブログについてはこれまでどおりカテゴリを用いて、というように方針を使い分けて構築するようにしました。

カテゴリごとのまとめページをかませることがなくなったため、より回遊がしやすくなっていると思います。

共同運営者も更新しやすいサイトに

第一の目標は一緒に運営している妻も更新しやすいサイトを実現することでした。それもブログ部でなく、いわゆる固定ページ部の写真差し替え・レイアウト改変・独自パーツの追加がしやすいことが理想です。

まだまだCMSの仕組みが活かしきれておらず十分とは言えませんが、一応満足できる状態にはできたかなと思っています。

a-blog cmsの強みの一つは記事を構成するブロックをわりとお手軽に自作できることです。WordPressのエディタにはないような機能・クラスをもったブロックもわりとお手軽に用意して更新者に使ってもらうことができます。

少し慣れはいりますが、記事のカラム分けなどにもある程度対応しやすいため、専門家でない妻がエディタからレイアウトに関する編集もできるようになりました。

スペースの現在を反映しやすいサイトに

上記のように関係者が更新しやすいシステムにすることで、使用されている写真などがどのページでも更新しやすくなりました。ページの間に挟まれている視差効果（パララックス）画像もブロック化しているため、妻でもJavascriptのことなどまったく気にしないまま画像を差し替えたり、新たに視差効果画像ブロックを追加することができるようになっています。

これはつまり、コワーキングスペースの現在を写し取ったサイトにしやすい、ということです。
実際にコワーキングスペースのレイアウトはいろんな事情でどんどん変わりますし、関わる人・盛り上がっているコミュニティイベントなど、変化していくことはとても多いわけで、これに対応できる必要がありました。これからの運用がよりスムーズに、動きのあるサイトに変わることを意識していきます。

デザインについて

「スペースの現在を切り取る」ということは構想段階から意識しており、したがってデザインも写真が印象に残ることを意識しています。あまりクライアントワークでは利用していなかった視差効果ですが、今回は使い回せるブロック化をして大写しの写真をガンガン見てもらえる作りにしています。

フォントのこと

フォントについてはこれまでにこぶりなゴシックや筑紫A丸ゴシックを用いることが多かったのですが、今回FONTPLUSさんをたまたま契約する機会があったため、本文に使用することを視野に入れて再考しました。

試験的に、ではありますが「人間くささ・手ざわりがあること」かつ「可読性が高いこと」を条件に考え、筑紫ゴシックを全面的に採用しています。

アイコンのこと

2016年からのお気に入り、羽野めぐみさんの「feathericon」を採用しています。とくに今回は利用できる設備をリスト表示するブロックで大活躍してもらっています。また顔文字アイコンはフォームでの各種メッセージ・フィードバック部分に用いて内容がポジティブなものなのかネガティブなものなのか判別しやすくしています（ちょっと現在はサイズが小さいので大きくしようと思ってます）。