sort by entered order

juliecogley · Oct 27, 2024 · 630d692 · 630d692
1 parent b894344
commit 630d692
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 5 deletions.
diff --git a/src/index.vto b/src/index.vto
@@ -7,11 +7,11 @@ priority: 0.9
 ---
 <!-- ===== START LAYOUT: HOME ===== -->
 <article class="fl w-100">
-{{ for item of search.pages(`type=showcase`, "date=desc") }}
+{{ for item of search.pages(`type=showcase`, "order=asc") }}
 <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
   <a href="{{ item.url }}" target="_blank">
     <div class="aspect-ratio aspect-ratio--3x4 shadow-1 br1">
-      <span style="background-image:url({{ item.bgimage }});" class="dt cover bg-center aspect-ratio--object grow-large hide-child br1">
+      <span style="background-image:url({{ item.indeximage }});" class="dt cover bg-center aspect-ratio--object grow-large hide-child br1">
         <span class="white dtc v-mid w-100 h-100 child bg-black-40 pa5 br1"><em>{{ item.category }}<br>{{ item.indextitle }}</em></span>
         </span>
     </div>
@@ -22,7 +22,7 @@ priority: 0.9
 
 
     <section class="fl w-100">     
-      <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
+      {{# <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
         <a href="./introduction/nn-2024/index.html" target="_blank">
         <div class="aspect-ratio aspect-ratio--3x4 shadow-1 br1">
           <span style="background-image:url(index_assets/nn2024-05kotobagaki.jpg);"
@@ -33,7 +33,7 @@ priority: 0.9
           </span>
         </div>
         </a>
-     </div>
+     </div> #}}
         <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
           <a href="./introduction/whitening_flyer/index.html" target="_blank">
           <div class="aspect-ratio aspect-ratio--3x4 shadow-1 br1">

diff --git a/src/showcase/nn-2024.vto b/src/showcase/nn-2024.vto
@@ -1,7 +1,8 @@
 ---
 url: /showcase/nn-2024/
+order: 100
 category: clientwork
-bgimage: /index_assets/nn2024-05kotobagaki.jpg
+indeximage: /index_assets/nn2024-05kotobagaki.jpg
 indextitle: 美大生のポートフォリオサイト
 metas: 
   title: 芸術家・中原菜海様ポートフォリオサイト

diff --git a/src/showcase/whitening_flyer.vto b/src/showcase/whitening_flyer.vto
@@ -0,0 +1,93 @@
+---
+url: /showcase/whitening_flyer/
+order: 200
+category: clientwork
+indeximage: /index_assets/whitening_flyer01.jpg
+indextitle: ホワイトニングサロンのチラシ
+metas: 
+  title: ホワイトニングビューティー
+  description: クライアントワークとして、ホワイトニングサロンのチラシを制作しました。
+  image: /index_assets/whitening_flyer02.jpg
+---
+<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="/index_assets/whitening_flyer01.jpg" alt="thumbnail">
+    <header class="fl w-100 pa3-m pa4-l mb3 mb5-l">
+      <div class="works-title">
+        <span class="gray">clientwork/ホワイトニングビューティー</span><br><br>
+        <h1 class="lh-title f3 b mt0 sitefont-700">
+          ホワイトニングサロンのチラシ
+        </h1>
+      </div>
+      <p>
+        クライアントワークとして、ホワイトニングサロンのチラシを制作しました。<br>
+        <p class="gray">
+        担当:　情報設計→デザイン<br>
+        期間:　3週間(2024.8)<br>
+      ソフト:　Figma<br>
+      </p>
+      <p class="i black-50">更新: 2024年09月28日</p>
+    </header>
+    <section class="fl w-100">
+      <div class="fl w-100 pa3-m pa4-l mb3 mb5-l">
+        <h1 class="lh-title f3 b mt0 sitefont-700">
+          <span class="gray">(1)デザインコンセプト</span>
+        </h1>
+        <span class="dark-blue b f5">
+        『エレガント×女性らしいデザイン』
+        </span>
+        <br><br>
+      </div>
+      <div class="fl w-100 pa3-m pa4-l mb3 mb5-l">
+        <h1 class="lh-title f3 b mt0 sitefont-700">
+          <span class="gray">(2)制作経緯</span>
+        </h1>
+        <p>
+          ▼課題<br>
+          ・旧バージョンのチラシがあるものの、情報量の多さや文字が小ささから、訴求ポイントがわかりにくい。<br>
+          ・お得な初回限定価格のメニューをPRしたい<br>
+          <br>
+          ▼方針<br>
+          ・優先順位をつけて情報設計。<br>
+          ・サロンの強みをアピールし、新規顧客獲得に繋げる。<br>
+          ・20代から40代(特に女性)をメインターゲットとしたチラシに。<br>
+          ・既存のロゴとも馴染ようなデザインにする。<br>
+          <br><br>
+            </p>
+      </div>  
+      <div class="fl w-100 pa3-m pa4-l mb3 mb5-l">
+        <h1 class="lh-title f3 b mt0 sitefont-700">
+          <span class="gray">(3)工夫したポイント
+          </span>
+        </h1>
+        <p>
+          <span class="dark-blue b f5">
+          ▼情報の整理</span><br>
+          「ブレーカー」「配電盤」「制御盤」「分電盤」を表す電気図面記号をデザインに取り入れて、<br>
+          電気やブレーカーのイメージが視覚的に伝わるようにしました。
+          <br><br>
+          <span class="dark-blue b f5">
+          ▼やわらかくエレガントなデザイン</span><br>
+          フォントはしっぽり明朝を主に使用。淡い配色で余白を多めにとり、<br>
+          女性らしさやエレガントさを表現しました。<br>
+          また、既存のロゴがなじむよう、青を基調とした配色にしました。
+          <br><br>
+          <span class="dark-blue b f5">
+          ▼サロンの強みを伝える</span><br>
+        ホームページや公式SNSを通じてお店の強みを分析し、3点にまとめて記載しました。  
+        </div>
+      <div class="fl w-100 pa3-m pa4-l mb3 mb5-l">
+        <h1 class="lh-title f3 b mt0 sitefont-700">
+          <span class="gray">(4)デザインバリエーション</span>
+        </h1>
+        <p>
+          ▼『フレッシュ×健康的』をコンセプトにしたデザインも制作しました。<br>
+          <img class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l" src="/index_assets/whitening_flyer02.jpg" alt="thumbnail">
+
+
+
+            </p>
+      </div>  
+    </section>
+  </article>
+</div>