HARESのつくりかた  - UIUXデザイン編 #01

こんにちは、大嶋たいとです。noteへの投稿は2回目となります!今回の記事は、僕が今インターンをしているメディアHARESで、実際に行ったカイゼン(使いたかった)を「HARESのつくりかた」と称して紹介していきます。ちなみに読み方は「ヘアーズ」です。

また、本記事は、自分の備忘録的な意味と、実際に行ったカイゼンに対するフィードバックをnoteのクリエイター、または読者の方々から頂けたらなと思ってこちらに投稿しています。

もし何かお気付きのところがありましたら、教えていただけますととても嬉しいです!!

そもそもHARESってなに?

HARES.JP」は、小さな世界をつなぐコミュニティメディアです。世界に無数に存在する小さな組織をメディア(媒介)として引き合わせ、新しく小さなコミュニティをつくる。「大事にしたかったけど、今までできてなかったこと」を記事として発信し、利己と利他、仕事と家庭、経済合理性と幸福など、対極にあるものの“両方”を大事にできる世界をつくります。

・・・

HARESで僕は何をしているのか

HARESでは、UIUXデザインの提案改善を行なっています。僕がHARESにいる理由は、身近なところで小さな世界が発見され、繋がり、シナジーが起こるのをみたいし、それに関わりたいからです。

メディアに関わるなかで、色んな人と話せば話すほど、自分は至らないし、未熟だなと思いますが、それと同時に100人に話を聞いたら、100人が違うストーリーを持って生きていることに気づけました。

それはとても素敵なことだと思い、それによってただ漠然と「何かになろうとしていたこと」の虚無さにも気づくことができました。まだまだ自分が「何者」なのかについて自信を持って語れませんが、七転び八起きの精神で邁進し、少しずつその輪郭が見えてきたように思います。

僕はこのメディアで「小さな世界をつなぐ」ことをUIUXデザインで実現していきます。

・・・

僕のことについては少し長くなるので、別記事で書きたいと思います!
「HARESとは?」の詳細については、編集長(奥岡ケント)が「HARESのつくりかた」でこれから書いてくださる予定です。


カイゼンしたところ


今回のカイゼンは記事部分の可読性を上げるため、テキスト周りを中心に実装しました。テキスト周りについて学ぶにあたり、クリエイターの方の知見がnote上に溜まっており、色々な記事を参考にさせていただきました、ありがとうございました!

今回の大きなカイゼン点は、大きくわけて二つ、コンテンツの見やすさカイゼンと文章の読みやすさカイゼンです。一つずつ見ていきます。
(*今回のカイゼンは、ほとんどがスマートフォンビューでの実装です。)

コンテンツの見やすさカイゼン

今までのサイトでは、一つ一つのコンテンツ(記事、文章、画像等)に見やすさがありませんでした。その原因はコンテンツに抑揚(コントラスト)がなかったことだと思います。

抑揚がないことで、コンテンツの境目が曖昧になり、「間延びしたコンテンツ」になってしまっている。それにより、サイトを訪れた読者が、いまいち文章に集中できなかったり、必要以上にタイトルや画像に気をとられるといったことが発生してしまいます。

コンテンツの見やすさを阻害していた要因とカイゼン後の画像を用意しました。
メディアにおけるUIUXデザイナーは、「読者が記事に集中できる」UIを作ることを最上段の優先順位に設定していると思います。それは、過度なUI、不自然なUIをできる限りなくし、読者が自然と記事を読み進められるを環境を作ることです。

サイトのいたるところに意図してない余白が空いていたので、これらは全て詰めて調整しました。

また、サイトと記事との切れ目が曖昧になり、余白が余計に空いているように見えたので、記事部分の背景色を灰色に設定し、文章の背景色には白で、コントラストを作り、マージンも調整しました。これにより、締まった印象を与えるのと同時に、画像も大きく表示できるようになりました。

文章の見やすさカイゼン

テキストに関しては、周りの人の声を聞きながら、細かい調整を繰り返しています。今回の変更では、フォントの設定、行間、行長、色など全てを刷新し、以前とは全く違う(かなり主観)テキストに変更しました。

いろんな記事やメディアを参考にしながら、調整を繰り返しました。大きな変更点は、文字色を少し薄めに設定し、HARES記事の引きのある見出しが引き立つようにしたことと、フォントを細いものに変え、長い文章でも読み進めやすくしました。

(いろいろなWEBメディアのテキストを参考にしているうちに、さまざな違いや工夫があることが分かりました。こちら今度まとめて見たいと思います。)

テキストに関しては、主観だとかなりわかりづらい部分があります。
読みやすいテキストかどうか、ぜひ教えていただきたいです...

これから

これからやっていきたいことはざっとこんな感じです。

・ライター一覧ページの作成(実装中)
・タグを媒介として、記事と人をつなぐ仕組み
・記事に読後の感想を可視化できる仕組み(いいねボタン?)
・ライターだけでなく、インタビュイもメディア内でうまく存在する仕組み
・シェアボタン最適化
・SNS上の感想を拾ってきて、適切なかたちで表示(モーメントタグ?)
・レコメンド記事の最適なアルゴリズムつくり
・サイト内諸修正

HARESでは、必ずしもpv,uu数など見える数値だけをKPIに設定し、追っているわけではありません。インタビューを受けてくれた方との関係、フォトグラファー、ライターとの関係、記事を読んでくれた読者が、読後に「やさしい記事」だと思えるかどうかなど、数値には一見わからない部分を大切にしています。

僕の役割は、こういった目に見えない部分を、可視化できるようなUIを作ること。HARESの世界観を文章以外のカタチで届けます。

このような形でこれから「HARESのつくりかた 〇〇編」として発信していけたらと思います。今回はUIUXを担当している大嶋からの記事でした。HARESのカイゼン点は都度僕からnoteにまとめて発信していこうと思います。

最後に

HARESは一見矛盾した価値観の両方を大事にするメディアでありたいと思っています。世の中にたくさん存在する多様な世界をメディアとして引き合わせて、世の中に発信していく。

だから僕らのあり方も、「既存の「つくり手」と「読み手」という関係だけでなく、小さな世界を作る一端として存在し、全員が主体となって一緒にメディアを作って行けたらと思います。

「小さな世界をつなぐ」という想いに共感していただけた方、ぜひ温かいメッセージをいただけるととても励みになります。また、noteのクリエイターの方からも、「もっとこうした方がいい!」などのカイゼンフィードバックもいただけたらとても嬉しいです。よろしくお願いいたします。

最後までご覧いただきありがとうございました!
HARES UIUXデザイナー 大嶋泰斗


HARES:

僕の好きな記事をいくつか入れておきます。もしよければご覧くださいませ。
esportsが「ただのゲーム大会」で終わらないために。新卒プロゲーマー・鈴木悠太さんがエンドユーザーを代表して伝えたいこと

「自分は何者?押し殺した個性がアイデンティティに」“サイパン育ちの日本人”が東京で会社を設立した理由。

>オフィスを出たらフィンスイミング日本代表。午後7時からの練習で日本代表を勝ち取った柿添武文さんの“サラリーマンの勝算”


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

スキありがとうございます😊ツイッターで感想が聞けると嬉しいです!!
14

大嶋たいと

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
3つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。