necco Note
夏井 ひとみ
necco Note
秋田人形道祖神プロジェクト（ANP）ウェブサイト公開！【後編】撮影・デザイン・実装の裏側、教えます
- Brand Design
- Contents Design
- necco note
- Web Development
秋田人形道祖神のウェブサイトが誕生するまで。制作側のお話です。
すこし時間が空いてしまいましたが、「秋田人形道祖神プロジェクト ウェブサイト公開記念ブログ」の後編です。
前編では、道祖神の魅力や取材時のエピソード、書籍の制作秘話などをANPのおふたりにうかがいました。
秋田人形道祖神プロジェクト（ANP）ウェブサイト公開！【前編】 ANPのおふたりに聞いた「人形道祖神の魅力とは？」
今回はneccoが制作を手がけたウェブサイトについて、撮影・デザイン・実装の3つに分けて裏側をご紹介します。
秋田人形道祖神プロジェクトのウェブサイトは下記からご覧ください。
https://dosojin.jp/
もくじ
①書籍やTシャツ撮影、すべてneccoが担当しました。
②フォントは筑紫オールド明朝、デザインツールはFigmaを使用！
③不思議な動きのアニメーションと、グッズ・記事販売の仕組み
④さいごに
①書籍もTシャツも、撮影はすべてneccoが担当しました。
ウェブサイトに掲載しているグッズ写真やイメージ写真は、neccoが撮影しました。
撮影場所はすべてneccoオフィスです。どんな風に撮影したのか、少しずつご紹介しますね。
書籍「村を守る不思議な神様」写真
ウェブサイトのヘッダーやFacebookのANPページでも使用されている書籍の写真。
結構いい写真が撮れたな〜と満足しているのですが、実は、モデルも撮影者も私なんです。
まずは実際に本を読んでいるシーンを想定し、テーブルの上にグリーンやお茶をセッティング。
書籍にしっかりとピントが当たるよう、細かい構図を決めてからタイマーをセットして撮影しました。
補正前の写真がこちらです。
最初はこのように引きで撮り、顔を見せないようトリミングして補正をかけました。
補正のポイントは、全体的に明るさと彩度を上げたことです。書籍のデザインがカラフルなので、表紙の色を目立たせています。
秋田人形道祖神Tシャツ着用写真
Tシャツの販売ページで使われている、これらの着用画像。
親しみやすさを出すため、また、予算を抑えるために、プロのモデルは使わず全員身内で撮影しました。
身内というのはneccoスタッフ（デザイナーの今・私）と、ANPの小松さん・宮原さん、そして小松さんご家族です。
身長によるサイズ感の違いを表現したかったので、150㎝の今・160㎝の宮原さんがSサイズを、165㎝の私がMサイズを担当。
Lサイズ着用写真として小松さん、ファミリーカットとして小松さんのお嬢さんと奥さまにも出演していただきました。
撮影場所は、オフィスでいちばん明るい窓際です。
大きな窓から自然光が入ってくるため、neccoの個人写真撮影やイメージ撮影はここが定位置です。
スタイリングは、パンツやスカートをそれぞれ持ち寄り、Tシャツをインしたり、袖をまくったりと、できるだけバリエーションを増やしました。
モデルさんが手持ちぶさたにならないよう、バッグを持つなど工夫してポージングを変えています。
みなさんモデル撮影はこれがはじめて。さすがに最初は表情が硬かったですね。
自然な笑顔を引き出すため、撮影しながら会話をしたり、他のメンバーにカメラの後ろに回ってもらい、モデル役に話しかけてもらいました。
はじめは緊張していた小松さんのお嬢さんも、すこしずつ笑顔が増えてきました。
宮原さんがサイト内のブログに撮影の様子を書いてくださいました。
また、撮影中のタイムラプス動画を撮ったので、こちらもご覧ください。
②フォントは筑紫オールド明朝、デザインツールはFigmaを使用！
フォントについて
秋田人形道祖神の雰囲気をより押し出せるよう、フォント選びに気を配りました。
・見出し、太字など・・・・・筑紫Bオールド明朝
・本文などの小さい文字・・・筑紫Aオールド明朝
「筑紫Bオールド明朝」を見出しや少し太文字の場合に使用し、本文はその書体にあわせて「筑紫Aオールド明朝」のレギュラーを選定しています。
筑紫書体は美しく古代的で柔らかな曲線が特徴なので、秋田人形道祖神の雰囲気にバッチリ合いますよね。
フォントの表示方法
WindowsでもMacでもキレイに表示される「ウェブフォント」という技術を使ってフォントを表示しています。
FONTPLUSさん（https://webfont.fontplus.jp/）のフォント配信がとっても速くて使いやすいので、オススメです。
注力したポイント
イラストレーターの宮原さんが描く道祖神のイラストが、鮮やかでかつ毒々しい雰囲気を持っているため、そのイメージを全面的に活かしながら制作していきました。
大きく、小さく、強く、優しく、不思議なイメージでデザインしています。
使用したデザインツール
neccoでは、ウェブページは全てFigmaでデザインしています。
デザイナー、ディレクター、エディター、エンジニアなど複数人が同時に動かせるので、大変便利です。
分かりやすくいえば「Sketch+Zeplin」でしょうか。Figmaのおかげで作業の効率が上がりました。
③不思議な動きのアニメーションと、グッズ・記事販売の仕組み
アニメーションについて
トップページで、メインイメージの文字がひらひら、ゆらゆらするアニメーション。
ここでは、人形道祖神の不思議な雰囲気や、偶像である人形・神様を表現しました。
いつもそこにいて優しく寄り添ってくれるような、村をそっと見守る雰囲気をイメージしています。
書体は上記で紹介した筑紫Aオールド明朝、太字部分は通常のゴシック体を書籍にあわせてあてています。
トップページのQ&Aセクションは、人形道祖神についての疑問がぽこぽこ湧いてくるさまをアニメーションで表現しました。
「人形道祖神について全く知らない人が多く、さまざまな疑問がたくさんあるだろう」という思いから生まれたものです。
下記のような動作です。
https://twitter.com/hatsukimiyahara/status/1096307997234479104
道祖神サイトのアニメーションはすべてanime.jsというJavaScriot animation engineを利用しています。
システム構成と機能について
・CMS – WrodPress
・カートシステム / ECカートプラグインWooCommerce
・WordPress テーマ / BootstrapベースのUnderstrap
上記システムを使用し
・取材記事の管理
・商品と受発注の管理
をひとつのウェブサイトでおこなっています。
まだ始動していませんが、記事自体を販売する仕組みもStripeを利用して開発しました。
秋田人形道祖神のことを取材などで追いかけているお二人の素敵な記事が、これからどんどん公開されていくはずです。
決済サービス
Stripe（https://stripe.com/jp）を使用しています。
弊社代表の阿部が、Stripeのユーザー主催のイベント、JP_Stripes Connect 2019にて事例発表として登壇しました。
その時の資料がこちらです。Stripeは本当に素晴らしいサービスです。
さいごに
こうして公開となった秋田人形道祖神ウェブサイトですが、neccoとしてはかなり挑戦的で遊び心を取り入れたサイトになりました。
neccoのスタッフ全員が、デザイナー・ディレクター・フォトグラファー・エンジニアとして、それぞれの持ち味を活かしながら楽しく制作できました。
このような機会をつくってくださったANPの小松さん、宮原さん、ありがとうございました。
書籍続編を刊行するためのクラウドファンディングでは、目標達成おめでとうございます。
これからもneccoは、ANPの活動をさまざまな面から応援してきます！
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年11月時点）
夏井 ひとみ
Hitomi Natsui
宮城県生まれ。 大学卒業後、仙台の広告代理店にて週刊フリーペーパーの取材・編集・ライティング、企業のイベント企画・プロモーション提案などに従事。その後、住宅会社の広報スタッフを経て2014年に秋田県へ。ウェブサイト、パンフレット、商品パッケージデザインなど、さまざまな制作物におけるディレクション・編集・取材・ライティングを幅広く経験。 2017年よりneccoに参画。好きなものはガンダム、花、鳥、写真、歌うこと。似ているキャラクターはニコロビン、メーテル、エボシ御前。こけしにも似ている。
