neccoのノートとお知らせ。秋田人形道祖神プロジェクト(ANP)ウェブサイト公開!【後編】撮影・デザイン・実装の裏側、教えます秋田人形道祖神のウェブサイトが誕生するまで。ウェブサイト公開記念ブログ」の後編です。前編では、道祖神の魅力や取材時のエピソード、書籍の制作秘話などをANPのおふたりにうかがいました。今回はneccoが制作を手がけたウェブサイトについて、撮影・デザイン・実装の3つに分けて裏側をご紹介します。秋田人形道祖神プロジェクトのウェブサイトは下記からご覧ください。https://dosojin.jp/もくじ1書籍やTシャツ撮影、すべてneccoが担当しました。2フォントは筑紫オールド明朝、デザインツールはFigmaを使用!3不思議な動きのアニメーションと、グッズ・記事販売の仕組み4さいごに1書籍もTシャツも、撮影はすべてneccoが担当しました。ウェブサイトに掲載しているグッズ写真やイメージ写真は、neccoが撮影しました。撮影場所はすべてneccoオフィスです。どんな風に撮影したのか、少しずつご紹介しますね。書籍「村を守る不思議な神様」写真ウェブサイトのヘッダーやFacebookのANPページでも使用されている書籍の写真。いい写真が撮れたな〜と満足しているのですが、実は、モデルも撮影者も私なんです。実際に本を読んでいるシーンを想定し、テーブルの上にグリーンやお茶をセッティング。書籍にしっかりとピントが当たるよう、細かい構図を決めてからタイマーをセットして撮影しました。補正前の写真がこちらです。最初はこのように引きで撮り、顔を見せないようトリミングして補正をかけました。補正のポイントは、全体的に明るさと彩度を上げたことです。書籍のデザインがカラフルなので、表紙の色を目立たせています。秋田人形道祖神Tシャツ着用写真Tシャツの販売ページで使われている、これらの着用画像。親しみやすさを出すため、また、予算を抑えるために、プロのモデルは使わず全員身内で撮影しました。身内というのはneccoスタッフ(デザイナーの今・私)と、ANPの小松さん・宮原さん、そして小松さんご家族です。身長によるサイズ感の違いを表現したかったので、150cmの今・160cmの宮原さんがSサイズを、165cmの私がMサイズを担当。Lサイズ着用写真として小松さん、ファミリーカットとして小松さんのお嬢さんと奥さまにも出演していただきました。撮影場所は、オフィスでいちばん明るい窓際です。大きな窓から自然光が入ってくるため、neccoの個人写真撮影やイメージ撮影はここが定位置です。スタイリングは、パンツやスカートをそれぞれ持ち寄り、Tシャツをインしたり、袖をまくったりと、できるだけバリエーションを増やしました。モデルさんが手持ちぶさたにならないよう、バッグを持つなど工夫してポージングを変えています。みなさんモデル撮影はこれがはじめて。最初は表情が硬かったですね。自然な笑顔を引き出すため、撮影しながら会話をしたり、他のメンバーにカメラの後ろに回ってもらい、モデル役に話しかけてもらいました。はじめは緊張していた小松さんのお嬢さんも、すこしずつ笑顔が増えてきました。宮原さんがサイト内のブログに撮影の様子を書いてくださいました。撮影中のタイムラプス動画を撮ったので、こちらもご覧ください。Connectでもお話するStripeを使った秋田人形道祖神ECサイトのT-shirtの撮影風景です。漆喰の壁だとneccoオフィスが簡易スタジオに見えてくる。20192フォントは筑紫オールド明朝、デザインツールはFigmaを使用!フォントについて秋田人形道祖神の雰囲気をより押し出せるよう、フォント選びに気を配りました。「筑紫Bオールド明朝」を見出しや少し太文字の場合に使用し、本文はその書体にあわせて「筑紫Aオールド明朝」のレギュラーを選定しています。筑紫書体は美しく古代的で柔らかな曲線が特徴なので、秋田人形道祖神の雰囲気にバッチリ合いますよね。フォントの表示方法WindowsでもMacでもキレイに表示される「ウェブフォント」という技術を使ってフォントを表示しています。FONTPLUSさん(https://webfont.fontplus.jp/)のフォント配信がとっても速くて使いやすいので、オススメです。注力したポイントイラストレーターの宮原さんが描く道祖神のイラストが、鮮やかでかつ毒々しい雰囲気を持っているため、そのイメージを全面的に活かしながら制作していきました。大きく、小さく、強く、優しく、不思議なイメージでデザインしています。使用したデザインツールneccoでは、ウェブページは全てFigmaでデザインしています。デザイナー、ディレクター、エディター、エンジニアなど複数人が同時に動かせるので、大変便利です。分かりやすくいえば「Sketch+Zeplin」でしょうか。Figmaのおかげで作業の効率が上がりました。3不思議な動きのアニメーションと、グッズ・記事販売の仕組みアニメーションについてトップページで、メインイメージの文字がひらひら、ゆらゆらするアニメーション。ここでは、人形道祖神の不思議な雰囲気や、偶像である人形・神様を表現しました。いつもそこにいて優しく寄り添ってくれるような、村をそっと見守る雰囲気をイメージしています。書体は上記で紹介した筑紫Aオールド明朝、太字部分は通常のゴシック体を書籍にあわせてあてています。トップページのQ&Aセクションは、人形道祖神についての疑問がぽこぽこ湧いてくるさまをアニメーションで表現しました。「人形道祖神について全く知らない人が多く、さまざまな疑問がたくさんあるだろう」という思いから生まれたものです。下記のような動作です。「https://t.co/19TajAD40G」動くサンプルのご紹介。古代から続く神様が、現代の技術と見事に融合しました。ちなみにこの道祖神は中之又のカシマサマ。engineを利用しています。・商品と受発注の管理をひとつのウェブサイトでおこなっています。始動していませんが、記事自体を販売する仕組みもStripeを利用して開発しました。秋田人形道祖神のことを取材などで追いかけているお二人の素敵な記事が、これからどんどん公開されていくはずです。決済サービスStripe(https://stripe.com/jp)を使用しています。2019にて事例発表として登壇しました。その時の資料がこちらです。Stripeは本当に素晴らしいサービスです。さいごにこうして公開となった秋田人形道祖神ウェブサイトですが、neccoとしてはかなり挑戦的で遊び心を取り入れたサイトになりました。neccoのスタッフ全員が、デザイナー・ディレクター・フォトグラファー・エンジニアとして、それぞれの持ち味を活かしながら楽しく制作できました。このような機会をつくってくださったANPの小松さん、宮原さん、ありがとうございました。書籍続編を刊行するためのクラウドファンディングでは、目標達成おめでとうございます。東北学院大学を卒業後、仙台の広告代理店にて主に週刊フリーペーパーの取材・編集・ライティング、企業のイベント企画・プロモーション提案などに従事。その後、住宅会社の広報スタッフを経て2014年に秋田県へ。官公庁および県内企業のウェブサイト、冊子、情報誌、パンフレット、商品パッケージデザインなど、秋田県に関わるさまざまな制作物におけるディレクション・編集・取材・ライティングを幅広く経験。好きなものは伝統こけし、花、鳥、チョコレート。「こけしと自然」をテーマとした写真撮影が趣味で、2017年夏には青森にて写真展を開催した。似ているキャラクターはニコロビン、メーテル、エボシ御前。Niigata、Tokyo、Osakaに参加してきました。マーケティングの秋!開催しました。noteもうインスタ映えスポットに行く必要はない。一緒に「根っこ」を考えましょう。自社やサービス、商品のブランドづくり、商品パッケージデザイン・ロゴデザイン、ウェブサイトについてお困りではありませんか?わたしたちは戦略とマーケティングを起点とした、コンサルティング型のデザイン制作会社です。お客さまのことをnecco(ねっこ)から考え、論理的なブランディング・グラフィックデザインと、ウェブサイト・社内ウェブシステム制作の両軸から事業の課題を見える化し、解決します。まで一貫してお手伝いできることを強みとしています。見えている課題はもちろん、現在見えていない課題抽出からご一緒にはじめていきましょう!CONTACTお問い合わせneccoへのご相談・ご依頼はこちらのフォームよりお問い合わせください。INFO会社案内PDFダウンロードneccoの会社案内資料をPDFにて、こちらからダウンロードいただけます。