Skip to content

Commit

Permalink
deno fmt tidyup
Browse files Browse the repository at this point in the history
  • Loading branch information
@RickCogley
RickCogley committed Nov 10, 2024
1 parent 50acca6 commit d780ee4
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 89 deletions.
76 changes: 48 additions & 28 deletions src/showcase/fire-extinguisher_flyer.vto
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,28 @@ metas:

<div data-name="component">
<article class="cf pa4 mw9 center">
<img class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l" src="/assets/fire-extinguisher_flyer.jpg" alt="thumbnail" transform-images="avif webp jpg png 600@2">
<header class="fl w-100 pa3-m pa4-l mb3 mb5-l">
<img
class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l"
src="/assets/fire-extinguisher_flyer.jpg"
alt="thumbnail"
transform-images="avif webp jpg png 600@2"
/>
<header class="fl w-100 pa3-m pa4-l mb3 mb5-l">
<div class="works-title">
<span class="gray">work/大田区役所</span><br><br>
<span class="gray">work/大田区役所</span>
<br />
<br />
<h1 class="lh-title f3 b mt0 m-plus-2-700">
家庭用消火器のあっせんチラシ
</h1>
</div>
<p>
現職の仕事で、家庭用消火器のあっせんチラシを制作しました。<br>
現職の仕事で、家庭用消火器のあっせんチラシを制作しました。<br />
<p class="gray">
担当:　企画→情報設計→デザイン<br>
期間:　2週間(2024.7)<br>
ソフト:　Figma<br></p>
担当:　企画→情報設計→デザイン<br />
期間:　2週間(2024.7)<br />
ソフト:　Figma<br />
</p>
</p>
<p class="i black-50">更新: 2024年09月28日</p>
</header>
Expand All @@ -35,51 +43,63 @@ metas:
<span class="gray">(1)デザインコンセプト</span>
</h1>
<span class="dark-blue b f5">
『インパクト×事業内容が伝わるチラシ』
『インパクト×事業内容が伝わるチラシ』
</span>
</div>
<div class="fl w-100 pa3-m pa4-l mb3 mb5-l">
<h1 class="lh-title f3 b mt0 m-plus-2-700">
<span class="gray">(2)制作経緯</span>
</h1>
<p>
▼背景<br>
・新規で消火器のあっせん事業を開始。このあっせん事業を活用することで、対象者は消火器を安く購入できる。<br>
▼背景<br />
・新規で消火器のあっせん事業を開始。このあっせん事業を活用することで、対象者は消火器を安く購入できる。<br
/>
・事業開始に伴い、チラシを制作することに。
<br><br>
▼課題<br>
・新規の事業であるため、事業の存在自体が浸透していない。<br>
<br />
<br />
▼課題<br />
・新規の事業であるため、事業の存在自体が浸透していない。<br />
・消火器の購入を促すためには、事業内容だけではなく、『家庭用消火器を備えることの重要性』も押し出す必要がある。
<br><br>
▼方針<br>
・事業の存在をアピールするために、インパクトのあるデザインにする。<br>
・事業内容や事業のターゲットが誰なのか明確に伝える。<br>
<br />
<br />
▼方針<br />
・事業の存在をアピールするために、インパクトのあるデザインにする。<br
/>
・事業内容や事業のターゲットが誰なのか明確に伝える。<br />
・『家庭用消火器を備えることの重要性』を短い言葉で表現する。
<br><br>
</p>
<br />
<br />
</p>
</div>
<div class="fl w-100 pa3-m pa4-l mb3 mb5-l">
<h1 class="lh-title f3 b mt0 m-plus-2-700">
<span class="gray">(3)工夫したポイント</span>
</h1>
<p>
<span class="dark-blue b f5">
▼インパクト</span><br>
▼インパクト</span>
<br />
三角形を配置して画面を２分割し、シンプルかつインパクトのある構図を実現しました。
<br><br>
<br />
<br />
<span class="dark-blue b f5">
▼消火器らしさ</span><br>
消火器に関係するチラシだと伝えため、三角形にグラデーションをかけて、消火器から消化液が噴射されている様子を表現しました。<br><br>
▼消火器らしさ</span>
<br />
消火器に関係するチラシだと伝えため、三角形にグラデーションをかけて、消火器から消化液が噴射されている様子を表現しました。<br
/>
<br />
<span class="dark-blue b f5">
▼情報設計</span><br>
▼情報設計</span>
<br />
上半分、下半分、三角形の内側に情報を配置して、事業内容やターゲットが誰なのか一目で伝わるデザインに。
<br><br>
<br />
<br />
<span class="dark-blue b f5">
▼キャッチコピー</span><br>
『「もしも」のために、「いま」、備えよう。』という言葉を使い、いつ起こるかわからない災害のためにいま対策しようというメッセージを込めました。
▼キャッチコピー</span>
<br />
『「もしも」のために、「いま」、備えよう。』という言葉を使い、いつ起こるかわからない災害のためにいま対策しようというメッセージを込めました。
</p>
</div>

</section>
</article>
</div>
73 changes: 46 additions & 27 deletions src/showcase/kanshin-breaker-shikyuu_flyer.vto
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,29 @@ metas:

<div data-name="component">
<article class="cf pa4 mw9 center">
<img class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l" src="/assets/kanshin-breaker-shikyuu_flyer.png" alt="thumbnail" transform-images="avif webp jpg png 600@2">
<img
class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l"
src="/assets/kanshin-breaker-shikyuu_flyer.png"
alt="thumbnail"
transform-images="avif webp jpg png 600@2"
/>
<header class="fl w-100 pa3-m pa4-l mb3 mb5-l">
<div class="works-title">
<span class="gray">work/大田区役所</span><br><br>
<span class="gray">work/大田区役所</span>
<br />
<br />
<h1 class="lh-title f3 b mt0 m-plus-2-700">
感震ブレーカーの無料支給チラシ
</h1>
</div>
<p>
現職の仕事で、感震ブレーカーの無料支給事業に関するチラシを制作しました。<br>
<p class="gray">
担当:　企画→情報設計→デザイン<br>
期間:　1週間(2024.6)<br>
ソフト:　Figma<br></p>
現職の仕事で、感震ブレーカーの無料支給事業に関するチラシを制作しました。<br
/>
<p class="gray">
担当:　企画→情報設計→デザイン<br />
期間:　1週間(2024.6)<br />
ソフト:　Figma<br />
</p>
</p>
<p class="i black-50">更新: 2024年09月28日</p>
</header>
Expand All @@ -43,18 +52,21 @@ metas:
<span class="gray">(2)制作経緯</span>
</h1>
<p>
▼背景<br>
・感震ブレーカーを無料支給する事業に従事。<br>
・当年度から事業の対象者が拡大。<br>
▼背景<br />
・感震ブレーカーを無料支給する事業に従事。<br />
・当年度から事業の対象者が拡大。<br />
・新たなターゲットに向けたチラシを制作。
<br><br>
▼課題<br>
<br />
<br />
▼課題<br />
・新たに対象者となった層は、感震ブレーカーという器具や事業について知らない可能性が高い。
<br><br>
▼方針<br>
・事業について知るきっかけとなるようなデザインに。<br>
<br />
<br />
▼方針<br />
・事業について知るきっかけとなるようなデザインに。<br />
・行政目線ではなくターゲット目線で情報設計をする。
<br><br>
<br />
<br />
</p>
</div>
<div class="fl w-100 pa3-m pa4-l mb3 mb5-l">
Expand All @@ -63,20 +75,27 @@ metas:
</h1>
<p>
<span class="dark-blue b f5">
▼情報の強弱</span><br>
「まずは名前を覚えてもらう」ことを目標に、感震ブレーカーというキーワードを一番に強調しました。
<br><br>
▼情報の強弱</span>
<br />
「まずは名前を覚えてもらう」ことを目標に、感震ブレーカーというキーワードを一番に強調しました。
<br />
<br />
<span class="dark-blue b f5">
▼ユーザー目線</span><br>
「事業の対象者が拡充しました」等、行政目線の表現を使わないようにしました。<br>
「感震ブレーカー、知っていますか?」とターゲットに問いかけることで、事業を身近に感じてもらい、自分事として捉えてもらえるよう工夫しました。<br><br>
▼ユーザー目線</span>
<br />
「事業の対象者が拡充しました」等、行政目線の表現を使わないようにしました。<br
/>
「感震ブレーカー、知っていますか?」とターゲットに問いかけることで、事業を身近に感じてもらい、自分事として捉えてもらえるよう工夫しました。<br
/>
<br />
<span class="dark-blue b f5">
▼地震や揺れのイメージ</span><br>
感震ブレーカーは、地震の揺れを感知して電気を自動で遮断する器具です。<br>
感震ブレーカーの機能がイメージできるよう、背景に薄く同心円を配置し、「地震の揺れ」を想起させるデザインにしました。
</p>
▼地震や揺れのイメージ</span>
<br />
感震ブレーカーは、地震の揺れを感知して電気を自動で遮断する器具です。<br
/>
感震ブレーカーの機能がイメージできるよう、背景に薄く同心円を配置し、「地震の揺れ」を想起させるデザインにしました。
</p>
</div>

</section>
</article>
</div>
95 changes: 61 additions & 34 deletions src/showcase/kanshin-breaker_flyer.vto
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,36 @@ metas:

<div data-name="component">
<article class="cf pa4 mw9 center">
<img class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l" src="/assets/kanshin-breaker_flyer01.png" alt="thumbnail" transform-images="avif webp jpg png 600@2">
<img class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l" src="/assets/kanshin-breaker_flyer02.png" alt="thumbnail" transform-images="avif webp jpg png 600@2">
<img
class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l"
src="/assets/kanshin-breaker_flyer01.png"
alt="thumbnail"
transform-images="avif webp jpg png 600@2"
/>
<img
class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l"
src="/assets/kanshin-breaker_flyer02.png"
alt="thumbnail"
transform-images="avif webp jpg png 600@2"
/>
<header class="fl w-100 pa3-m pa4-l mb3 mb5-l">
<div class="works-title">
<span class="gray">work/大田区役所</span><br><br>
<span class="gray">work/大田区役所</span>
<br />
<br />
<h1 class="lh-title f3 b mt0 m-plus-2-700">
感震ブレーカーの普及啓発チラシ
</h1>
</div>
<p>
現職の仕事で、防災用品「感震ブレーカー」のチラシを制作しました。<br>
感震ブレーカーとは、分電盤に取り付けて、設定値以上の揺れを感知すると自動で電気を止める器具です。<br>
現職の仕事で、防災用品「感震ブレーカー」のチラシを制作しました。<br />
感震ブレーカーとは、分電盤に取り付けて、設定値以上の揺れを感知すると自動で電気を止める器具です。<br
/>
<p class="gray">
担当:　企画→情報設計→デザイン<br>
期間:　1週間(2024.8)<br>
ソフト:　Figma<br></p>
担当:　企画→情報設計→デザイン<br />
期間:　1週間(2024.8)<br />
ソフト:　Figma<br />
</p>
</p>
<p class="i black-50">更新: 2024年09月28日</p>
</header>
Expand All @@ -37,28 +51,31 @@ metas:
<span class="gray">(1)デザインコンセプト</span>
</h1>
<span class="dark-blue b f5">
『一目で感震ブレーカーの機能が伝わるチラシ』
『一目で感震ブレーカーの機能が伝わるチラシ』
</span>
</div>
<div class="fl w-100 pa3-m pa4-l mb3 mb5-l">
<h1 class="lh-title f3 b mt0 m-plus-2-700">
<span class="gray">(2)制作経緯</span>
</h1>
<p>
▼背景<br>
・急遽、１週間後までにチラシのデザイン・印刷まで対応することに。<br>
<br>
▼課題<br>
・短い納期でチラシを制作する必要がある。<br>
・旧バージョンのチラシは情報が整理されておらず、一目で感震ブレーカーのチラシだと分からない。<br>
<br>
▼方針<br>
・タイトスケジュールだからこそ、細かいスケジュールを立てて「何をいつまでに」を明確にする。<br>
・ぱっと目をひき、感震ブレーカーだ！とわかるデザインにする。<br>
・チラシが見られる場面を想定して制作する。<br>
▼背景<br />
・急遽、１週間後までにチラシのデザイン・印刷まで対応することに。<br />
<br />
▼課題<br />
・短い納期でチラシを制作する必要がある。<br />
・旧バージョンのチラシは情報が整理されておらず、一目で感震ブレーカーのチラシだと分からない。<br
/>
<br />
▼方針<br />
・タイトスケジュールだからこそ、細かいスケジュールを立てて「何をいつまでに」を明確にする。<br
/>
・ぱっと目をひき、感震ブレーカーだ！とわかるデザインにする。<br />
・チラシが見られる場面を想定して制作する。<br />
・情報の取捨選択を行い、必要な情報が伝わるチラシにする。
<br><br>
</p>
<br />
<br />
</p>
</div>

<div class="fl w-100 pa3-m pa4-l mb3 mb5-l">
Expand All @@ -68,25 +85,35 @@ metas:
</h1>
<p>
<span class="dark-blue b f5">
▼「電気」や「ブレーカー」のイメージ</span><br>
「ブレーカー」「配電盤」「制御盤」「分電盤」を表す電気図面記号をデザインに取り入れて、<br>
電気やブレーカーのイメージが視覚的に伝わるようにしました。<br><br>
▼「電気」や「ブレーカー」のイメージ</span>
<br />
「ブレーカー」「配電盤」「制御盤」「分電盤」を表す電気図面記号をデザインに取り入れて、<br
/>
電気やブレーカーのイメージが視覚的に伝わるようにしました。<br />
<br />
<span class="dark-blue b f5">
▼洗練された印象</span><br>
▼洗練された印象</span>
<br />
敢えて写真を使わず、色数もシンプルにまとめることで「役所っぽいデザイン」からの脱却に挑戦しました。
<br><br>
<br />
<br />
<span class="dark-blue b f5">
▼場面を想定したデザイン</span><br>
このチラシは、印刷して役所窓口前のラックに配置する予定でした。ラックに配置すると、チラシの下側は隠れしまいます。<br>
このため、上3分の1に最も伝えたい情報(=感震ブレーカーの機能)を入れました。<br><br>
▼場面を想定したデザイン</span>
<br />
このチラシは、印刷して役所窓口前のラックに配置する予定でした。ラックに配置すると、チラシの下側は隠れしまいます。<br
/>
このため、上3分の1に最も伝えたい情報(=感震ブレーカーの機能)を入れました。<br
/>
<br />
<span class="dark-blue b f5">
▼見やすさ</span><br>
▼見やすさ</span>
<br />
役所には、老若男女、様々な方がいらっしゃいます。
誰でも読みやすいチラシにするため、強調したい部分の文字サイズは14pt以上、大きめにしました。<br>
フォントは、読みやすいZEN角ゴシックを使用しました。<br>
誰でも読みやすいチラシにするため、強調したい部分の文字サイズは14pt以上、大きめにしました。<br
/>
フォントは、読みやすいZEN角ゴシックを使用しました。<br />
</p>
</div>

</section>
</article>
</div>

0 comments on commit d780ee4

Please sign in to comment.