特殊カテゴリのArchived と Templates の記事を見た目でわかりやすくしました

今回のリリース内容

特殊カテゴリの Templates(テンプレート) と Archived(アーカイブ) の記事が、一見してわかりづらいというフィードバックをいただき、もう少しわかりやすくなるように、デザインを修正しました。

2023-06-28.png (538.4 kB)

修正内容

特殊カテゴリ名はラベル状表示でわかりやすく

特殊カテゴリはラベル状のデザインを付加して目につくようにし、Templates と Archived では色が違うラベルにしました。

Archived: アーカイブされた記事
ラベルは暗いデザインにして、仕舞われた感を出すようにしました。

image.png (664.7 kB)

Templates: テンプレート機能を持つ記事

image.png (6.2 MB)

一覧や検索結果でも特殊カテゴリをわかりやすく

記事一覧や検索結果でも、上記の特殊カテゴリはラベル表示するようにしました。
これによって、一覧で見た時点で、特殊カテゴリの記事であることを判別しやすくなります。

image.png (5.4 MB)

記事をスクロールしたときも、アーカイブ済み記事であることをわかりやすく

Archived の記事は、スクロールした時に出る記事タイトル表示のヘッダ(フローティングヘッダ)にも斜線模様の背景を追加しました。

(従来は、記事最上部に出るアラートにのみ斜線模様を付加しており、記事を下にスクロールした状態だとアラートが消えてわかりづらくなってしまっていました。)

image.png (908.5 kB)

ダークモードはこんな感じになります。warning 色を少しマイルドに調整しました。

image.png (452.8 kB)

解説: esa の特殊カテゴリについて

esa には一部、特殊な機能を持ったカテゴリが存在します。それら特殊カテゴリの中に記事を置くことによって、記事にある一定の機能をもたせることができます。

特殊カテゴリ1: Templates (テンプレート)

特殊カテゴリのうちの1つは Templates です。このカテゴリの中に記事を配置することによって、その記事を投稿テンプレートとして機能させることができます。

例えば下記のリンクの記事は、この記事のような ReleaseNotes の投稿テンプレートとして機能します。
#4: Templates/ReleaseNotes/%{Year}/%{month}/%{day}/title

新規投稿時にテンプレートを選択して……

image.png (115.7 kB)

こんな感じで書き始めることができます。

image.png (916.1 kB)

テンプレート について、詳しくはこちらのヘルプも合わせてご覧ください: #7: help/投稿テンプレート

特殊カテゴリ2: Archived(アーカイブ)

もう1つは Archived です。このカテゴリの配下に記事を置くことで、記事をアーカイブすることができます。

現在は使われていない等の理由で現在は利用していない(利用を推奨しない)が、削除はせずにとっておきたい記事などはアーカイブをオススメします。

記事中のメニューからもアーカイブすることが可能です。

image.png (144.2 kB)

アーカイブについて、詳しくはこちらのヘルプも合わせてご覧ください: #107: help/不要な記事の削除・アーカイブ

(\( ⁰⊖⁰)/) ヒトコト

:@taea: 昨日 (6/28)、ROUTE06 さん主催のデザインイベント KNOCK OUT DESIGN #1 に招待していただき、お邪魔してきました。

出されたお題をテーマにその場でデザインとプレゼンをして、その出来をデザイナー同士でバトルするというすごいイベントでした。バトルと銘打ってますが、実際は参戦者のみなさん含めとても楽しそうでピースフルなイベントでした。

自分は人前で作業するのが怖すぎたので、今回は参戦せずに気軽に見ていただけなのですが、
参戦者のみなさんは、衆人環視の15分という限られた時間の中で、ハイクオリティでよく練られたデザインを仕上げており、本当にすごくて尊敬しました……!それぞれのデザインプロセスや考え方も見せていただき、とても勉強になりました。

もう1つ注目したのは、参戦する各デザイナーさんに、セコンドのデザイナーさんがついて、2人でペアデザインやモブデザインのように進めていくやり方が面白いと思いました。

自分も会場の観客として、出てきたお題に沿って色んなアイデアを、会場にいた友人 の @machida さんと話すのがとても楽しくて、話すことで色んな考えが捗るという発見がありました。

例えば、
「フリーランスのデザイナー用のスケジュールカレンダーアプリの画面」 というお題が、もう少し詳細な要件とともに出てくるんですが、要件を読んで、そこから連想するものをまずは好き勝手に話すといった感じです。

  • カレンダーアプリ、使いやすいものを普通に作るとまんま Googleカレンダーになりそう 。ということはこのお題ではカレンダー以外の何かに着目して尖らせた方がよさそう。「フリーランス用」 というのがポイントではないか。

  • 要件に入っているカレンダーの予定の例を見ると、ミーティングや移動が毎日ギチギチに詰まってて忙しそうな人だな…… 。きっとわれわれとは違うタイプのフリーランスだ。 人日じゃなくて案件毎にいくらで請求してそう

  • 自分なら人日でお金もらってるから、カレンダーから 何時間働いたかがわかって、ついでに請求額を計算したい

  • この人はミーティングが多くて、移動時間が結構ありそう。予定の前後に挟まれる移動時間も行き先の住所とか入れたら勝手に計算してくれて、移動時間もスケジュールに組み込んでほしい

  • フリーランスは まとまった空き時間 をどうやりくりするかが重要だと思う。MTGなどの 予定が入ってないときに集中して作業したり 、落ち着いてマンガ読んだりしたいので、まとまった空き時間が把握できるカレンダーだといいかも。

などなど、1人で考えるより、2人以上でちょっとおふざけや屁理屈を交えながら好き勝手に話していると、色んなアイデアが湧いてきて面白かったです。話しているうちに、自分たちがフリーランスや仕事、スケジュールなどの概念をどのように捉えているのか、そこにどんなことを求めているのかなどもだんだんと見えてくる。
そういうものを形にできるとよさそうだなと思いました。

いつも割と1人で仕事しがちなので、デザイナー同士でアイデア出し合うのがとても面白いという発見がありました。次回は友人と組んで参戦できたらいいなあ :grin:

最近出不精が極まってしまって、イベントに参加させていただくの久しぶりだったのですが、外に出て人に会ってお話すると楽しくて刺激をもらえますね。
主催の ROUTE06 のみなさん、参戦してデザイン披露してくださったみなさん、お疲れ様でした!楽しいひとときを本当にありがとうございました!

会場もとてもオシャレ空間でDJも素敵でした。ありがとうございました :sparkles: オシャレな箱を積むとオシャレだ!

[ProTip] Webhookでdocs.esa.ioの更新通知を受け取ることができます

Enjoy "(\( ⁰⊖⁰)/)"
https://esa.io

END

  • Close