こんにちは、デザイナーのサバ缶です。

エイシスでは同人活動に関わる様々なサービスを展開する「トリオキニ」を運営しています。

元々は同人誌即売会での取り置きサポートサービスとして個人開発されたもので、後にエイシスにジョインいただき今の形となりました。

そのトリオキニから派生した「トリオラボ」というメディアサイトを立ち上げた際のプロセスをお話しします。

トリオラボについて

トリオラボは「同人界の「はてな」をさぐって、その「答え」を皆様にお届けしていきます。」というのがコンセプトの、同人界にまつわる様々な情報をお伝えするメディアサイトです。

同人活動に興味のある方、ぜひのぞいてみてください！きっと有益な情報がありますよ！

デザインの意図

メディアサイトのデザインをするのは初めてだったので、まず何を重要視すべきか考えました。

結果デザインにおいて一番意識したのは「見やすさ」です。
文字を読んでもらわなければ始まらないので、ここが一番重要だと考えました。

様々なメディアサイトを参考にしてPC、SPそれぞれでのフォントサイズやマージンの取り方などをよく見て一番見やすい形を探しました。（参考にしたサイトの一例として、LIGやGIZMODOなどがあります。）

▼参考にしたサイト（左：LIG 右：GIZMODO）

その上で、会社にある全検証機でデザインを見て文字の見やすさなど確認し、本当にこのフォントサイズ・余白が適切か？を確認しました。

見出しデザインは5種ほど制作しました。通常のデザイン業務だと見出しはh3くらいまで制作することが多いため、メディアサイトとなるとそこまで必要になるのか、という気づきを得ました。あまり主張しすぎないようシンプルなデザインに抑えてあります。

表を掲載する部分もあったのですが、ここも考慮したポイントの1つです。

表をスマホで表示する際は、下記参考サイトのように1列表示とするケースが一般に見受けられます。
▼1列表示参考サイト
https://blog.8bit.co.jp/?p=15136

が、トリオラボ内で表を扱うケースを考えてみると、「おすすめ印刷所の比較」「おすすめペイントソフトの比較」など、色々なものを比較するのが主な用途になり、かつ要素の量も多いと予想され、横スクロールの形にして一覧性は保った方がベターだと判断し、表は横スクロールさせる形で着地しました。
▼横スクロールさせる参考サイト（demo2）
https://www.unionnet.jp/demo/20140818/#sec02

実際のデザインがこちらです。横にまだ項目が隠れていて、スクロールできるようになっています。

メインビジュアルについても触れておきたいと思います。

下記ポイントを意識しつつIllustratorで制作しました。
・同人に関係するアイテム「平積みの薄い本と値札」「原稿」「ペンタブ」をちりばめて同人関係のサイトだということを表現
・「トリオラボ」というサイト名から連想した格好のトリオくん(※)も配置
（※トリオくんとは…トリオキニのメインキャラクターのとってもかわいいトリです。ぜひツイッターもチェックしてください！）

【余談】
実はもともと完全に趣味で勝手に描いた「おうちでイベントリ」という絵(上記)がありまして、このテイストの絵はメインビジュアルに使えるかも？と思い立ち、手を加えてメディアサイト用の絵を用意した経緯がありました。
趣味で描いたものが仕事に活かせて大変嬉しかったです😊

完成デザイン

そして完成したデザインがこちらです！スクリーンショットだけだと見えづらい部分もあるので、ぜひ実際のトリオラボもご覧ください！

コーディングで工夫した点

上のデザインにあるように、トップページではカード型、記事一覧ページではリスト型になっています。

見た目は違いますが、実はこの2つは全く同じHTML構造になっており、親要素の「l-articleListWrap」に「type-large」「type-small」を付与することによってスタイルを切り替えられるようになっています。

▼カード型

▼リスト型

これにより、デザインをどちらかに統一したいといった場面が出てきた際も簡単に対応可能となり、将来性を見据えた設計となっています。

SEOについて

ワイヤーフレームに、メインビジュアル下部にメディアサイトについての説明文（同人に関係するサイトであること、という内容）が入ると書いてありました。

これのワイヤーフレームを見た際、
・検索で流入してくる人はもう同人誌についての記事があるサイトだとわかっている
・リピーターにはノイズになるのでは？
・説明文は削って記事の位置を上げていいのでは？
と考えてディレクターに相談をしてみました。

結果…

【SEOのプロ　ディレクターKさん👨‍🏫】
・該当箇所はメディアトップになるページなので、記事が並ぶだけのページだとSEO的によろしくない
・他ページ（記事一覧など）との差としてユニークな要素がほしい
・よってデザイン的には目立たないようにしつつも、「トリオキニメディアはこういうものである」という要素をテキストかつ（おそらくここが重要）なるべくページ上部に設けたい

↓まとめるとこういうことでした！

・トップページは他ページとの差別化を図りたい
・ユニークな要素はテキストで入れたい

もしも活かせそうな場面がありましたらぜひ参考にしてみてください！

まとめ

メディアサイトのデザインをするのは初めてだったので不安もあったのですが、何を重視すべきかをはじめに考えたおかげで、とても見やすいサイトに仕上がったのではないかと思います。

今の所はランキングやレコメンド枠などは無いのですが、設ける想定はあるようなので将来的にやるかも…？しれません。
トリオラボはこれからも進化していきそうです！👊

同人活動を行なっている方、興味がある方、ぜひぜひトリオラボで知見を深めてみてください！

エイシスでは新サービスを立ち上げています

株式会社エイシスでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。「新サービスを立ち上げていきたい！」「新しいサービスのデザインに携わりたい！」などデザインチームの仕事やエイシスの社風に興味をお持ちいただけましたら是非お気軽にご応募くださいませ。