Add initial showcase file for test using vento as page template

src/showcase/_data.yml

@@ -0,0 +1,4 @@
+date: Git Last Modified
+layout: layouts/base.vto
+type: showcase
+priority: 1

src/showcase/nn-2024.vto

@@ -0,0 +1,140 @@
+---
+url: /showcase/nn-2024/
+category: clientwork
+metas: 
+  title: 芸術家・中原菜海様ポートフォリオサイト
+  description: 彫刻作品等を制作しているクライアント様のポートフォリオサイトを制作しました。『作品の世界観や魅力が伝わり、制作者の名前を覚えてもらえることを目的としたサイトです。
+  image: /index_assets/nn2024-01top.jpg
+---
+<div data-name="component">
+    <article class="cf pa4 mw9 center">
+      <img class="fl w-100  pv3 pa3-m pa4-l" src="../../index_assets/nn2024-01top.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>
+          『作品の世界観や魅力が伝わり、制作者の名前を覚えてもらえることを目的としたサイトです。<br>
+          ※デジタルハリウッドスタジオ新宿校の卒業制作として制作しました。
+          <br><br>
+        <p class="gray">
+          <a class="nn-2024-url hover-blue" href="https://julie.cogley.jp/portfolio/nn-2024/index.html">
+            URL:　https://julie.cogley.jp/portfolio/nn-2024/index.html</a><br>
+          担当:　企画→情報設計→デザイン→コーディング<br>
+          期間:　2か月(2024.2~3)<br>
+          ソフト:　Figma,Visual Studio Code,GitHub<br>
+          技術:　HTML,CSS,JavaScript<br>
+          機種:　spとpcのレスポンシブ対応<br>
+        </p>
+        <p class="i black-50">更新: 2024年05月06日</p>
+      </header>
+
+      <div>
+        <img class="fl w-100  pv3 pa3-m pa4-l" src="../../index_assets/nn2024-sp.jpg" alt="thumbnail">
+
+        <img class="fl w-100 w-25-l pv3 pa3-m pa4-l" src="../../index_assets/nn2024-02profile.jpg"
+          alt="thumbnail">
+        <img class="fl w-100   w-25-l pv3 pa3-m pa4-l" src="../../index_assets/nn2024-03works.jpg"
+          alt="thumbnail">
+        <img class="fl w-100  w-25-l pv3 pa3-m pa4-l" src="../../index_assets/nn2024-04works1.jpg"
+          alt="thumbnail">
+        <img class="fl w-100   w-25-l pv3 pa3-m pa4-l" src="../../index_assets/nn2024-05kotobagaki.jpg"
+          alt="thumbnail">
+          <img class="fl w-100   w-25-l pv3 pa3-m pa4-l" src="../../index_assets/nn2024-06contact.jpg"
+          alt="thumbnail">
+
+      </div>
+
+      <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>
+          <p>
+            ▼クライアント様の課題<br>
+            PDF版のポートフォリオしか持っておらず、限られた人にしか作品を見てもらえない。新規ファンを獲得しにくい。<br>
+            <br>
+            ▼解決策<br>
+            ポートフォリオサイトを制作して、誰でも気軽に作品集を見られるようにする。サイトを通して作品の魅力を伝え、新規ファンを獲得する。<br>
+            <br>
+            ▼サイトの方向性<br>
+            <span class="dark-blue">『①作品の世界観や魅力が伝わり、②クライアント様のことを覚えてもらえるサイト』</span>を制作。<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">(2)ターゲット</span>
+          </h1>
+          <p>
+            ▼サイト利用のイメージ<br>
+            ①自然検索　②QRコード読み取り　③SNSを通じて<br><br>
+            ▼ターゲット<br>
+            ポートフォリオサイトを閲覧する可能性が高いと考えられる<span class="dark-blue">
+              『元から芸術に関心があり、中原様のサイトや個展を見にくるような方』</span>をターゲットに。<br><br>
+            ▼ペルソナ<br>
+            サイト利用のイメージを踏まえて、次のとおりペルソナを設定。</p>
+          <br>
+          <div class="fl w-100 w-50-m  pv3 pa3-m pa4-l">
+            <img src="../../index_assets/persona-a.svg" alt="thumbnail">
+            <img src="../../index_assets/persona-b.svg" alt="thumbnail">
+          </div>
+
+        </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>
+            ▼デザインコンセプト<br>
+            <span class="dark-blue b">『詩集らしさ×余白感×見やすさ』</span><br>
+            作品の世界観が伝わるよう、詩集のようなサイトに。<br>
+            作品や詩の見やすさに配慮したシンプルデザインにしました。<br>
+            ベースカラーは#f7f2ea/#212427、アクセントカラーは#009DBF。<br>
+            フォントはしっぽり明朝を選択。<br><br>
+            ▼クライアント様からのご要望<br>
+            ①シンプルなデザインにしたい<br>②作品の世界観が伝わるデザインにしたい
+            <br><br>
+            ▼ご要望への対応<br>
+            ①過剰なあしらいは取り除き、控えめで統一感のある配色に。<br>
+            ②クライアント様の作品は詩とともに成立するため、”詩集”らしさのあるデザインに。余白を大目にとり、詩の部分(PC版)は縦書きにして作品に添えました。<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">(4)工夫したポイント</span>
+          </h1>
+          <p>
+            <span class="dark-blue b">
+              ▼世界観が伝わるトップページ</span><br>
+            作品の世界観を印象づけるため、作品の拡大図と詩を両方配置しました。クライアント様のお名前はヘッダーに配置して目立たせました。
+          </p>
+          <br>
+          <p>
+            <span class="dark-blue b">
+              ▼クリックしたくなる目次</span><br>
+            作品の写真を敢えて載せず、作品情報と詩の冒頭部分のみ載せることで、クリックを誘う仕掛けにしました。
+          </p>
+          <br>
+          <p>
+            <span class="dark-blue b">
+              ▼作品と詩に集中できるデザイン</span><br>
+            詩の部分だけ縦書きにすることで、詩なのか、それ以外の情報なのか一目でわかるようにしました。
+            余計なあしらいはせず、余白は多めに取りました。
+          </p>
+          <br>
+          <p>
+            <span class="dark-blue b">
+              ▼紙媒体らしさ</span><br>
+            紙で出来た詩集の雰囲気を出すために工夫をしました。<br>
+            背景色をベージュにして上下のグラデーションをかけることで、デジタル的な色の均一さをおさえ、紙媒体の質感を演出しました。
+          </p>
+          <br>
+      </section>
+    </article>
+</div>