tag: Web
web
場所起点でクラシック音楽に特化したイベント告知サイト
制作概要
日本全国で毎日のように開催されているクラシックコンサート。広報活動まで手がまわらない部分をなんとかしてあげるべく「ミカタ」になるため立ち上がりました。
イベントのリッチリザルトを最大限活用する
Google検索で検索結果に影響を及ぼすリッチリザルト。イベント掲載サイトでは「実装必須」ではあるものの、アマチュアや学生のクラシックコンサート告知サイトに導入されていることはほぼゼロに等しい状態。チケット購入サイトであるプレイガイドはSEOに強くても、アマチュアや学生のみなさんはプレイガイドを使うこともないため、どうしてもWEBプロモーションが弱く、SNSでの発信に頼ってしまう傾向があります。
イベントのリッチリザルトをしっかりと利用することで、検索エンジンを利用している人のGPS情報をもとに、近くで開催されるイベントとして検索結果に出現させることができる上、多くのキュレーションサイトに掲載されて情報拡散が見込めるようにしました。
新型コロナウイルスの登場で急速に需要が高まったオンライン・コンサート
新型コロナウイルスの登場でGoogleのイベント掲載仕様(中止・延期など)が追加・変更されたり、サイトで使用しているプラグイン Events Managerも急遽バージョンアップでオンライン開催対応を強化したりと、世界中でリアルイベントとオンラインイベントの在り方の模索がはじまりました。
そこで、急遽オンライン告知が簡単にできるように仕様を変更。
さらに、日本全国のホールの存続も危ぶまれるということからホールを起点にコンサートを探せるように仕様を少し見直しました。
日本全国のクラシックコンサート開催実績のあるホールを地図上に表示できるようにGoogle Cloud PlatformからAPIをつなぎ、視覚的に直感的に操作できるように改修。
自分の住んでいる地域にクラシックが開催されるホールがどのくらいあって、クラシックコンサートが毎日のように開催されているかを知ることで、クラシックコンサートをもっと身近に感じていただけるように。
そしてクラシックコンサートを通じて地域がひとつになり、活性化できるようなプラットフォームになるようなイベント告知サイトになればと思います。
2020 / Web
高田馬場にあるDJ Bar SIGNALのロゴとサイト制作
制作概要
高田馬場にあるDJ Bar SIGNALのロゴとサイト制作。ゴリゴリ動くオールフラッシュでイベントカレンダーとギャラリーを制作しましたが、現在はリニューアルされています。
メインビジュアルにインパクトあるイラスト
KENRICKさんのつながりでご依頼いただいた案件。現在はサイトのために描いていただいたイラストだけが残っています。イラストはShigeki Matsuyama作。メインビジュアルにイラストを起用すると写真を使うよりも印象づけが高まる気がします。さらに、サイト全体のテイスト・配色も自ずと決定されてくるので作りやすい・・のではないかと思います(提案段階で通りにくいのが難点ですが・・)
2009 / Web
練馬にある歯科医院 井村歯科医院サイト制作。PCやWebが苦手・・でも他店に負けないようなサイトをつくりたい
制作概要
練馬にある歯科医院 井村歯科医院サイト制作。PCやWebが苦手・・でも他店に負けないようなサイトをつくりたい(けどメンテナンスはできそうにない)というご依頼でした。
10年
サイトを1枚のチラシや三つ折り印刷物から原稿を起こして、カテゴライズして制作。制作から10年経った今でも同じデザインのまま(更新もされていませんが・・)使用していただいています。
無理にITを駆使してサービス地域を離れるプロモーションをするよりは、地域に根ざしたサービスを地域の方向けに「置いておく」というのもWebの在り方なのかもしれません。
2010 / Web
学生の頃から洋楽が好きで、毎週楽しみにしていたテレビ番組のサイトを制作できるなんて!とかなりテンション高めに取り組んだサイト制作
制作概要
TVK(テレビ神奈川)のビルボードTOP40公式サイト構築。学生の頃から洋楽が好きで、毎週楽しみにしていたテレビ番組のサイトを制作できるなんて!とかなりテンション高めに取り組んだサイト制作でした
本家Billboardとは別物
テレビ神奈川のビルボードTOP40はBillboardの本家とは全くの別物。もちろんBillboard JAPANとも違うものです。「かっこいい」「最新の」音楽をお届けする番組ではあるのですが、番組のテイストや横浜という場所のイメージを加味して、レトロデザインにしました。ほんと、今思うとここまでレトロデザインでよく通ったな・・・と思います。それからリニューアルされているようですが、レトロテイストが根付いているようで(笑)。
サイトの大部分はFlashとXMLによる更新。
Youtubeも無い時代でしたが、ページトップにはオープニングムービーを流すなどしてレトロ感と最先端(WEBで動画を流すのも一苦労だった時代なので・・)を組み合わせた制作でした。
http://www.tvk-yokohama.com/top40/
(現在はリニューアルされています)
2009 / Web
愛犬・愛猫のための健康フードのECサイト、コーポレートサイト構築
制作概要
愛犬・愛猫のための健康フードのECサイト、コーポレートサイト構築。オフィスは愛犬を連れて出社OKな愛犬と愛猫のためにあるようなジャパンペット商事さん。現在は事業撤退でサイト閲覧も商品購入もできません。
WEB制作からマーケティングをはじめるキッカケに
愛犬とともに出社される社長さんの「フードに対する熱い思い」をヒアリングするのがとても勉強になり、楽しかったジャパンペット商事さん。話が収まらずにご自宅にまでお邪魔して(自宅には愛猫もいました)良質なフードを届けたいという想いを伺いました。当時の私はマーケティング知識も乏しく、できることはWEB構築だけだったため、マーケティングを本格的に取り組むきっかけになった制作になりました。
マーケティングは当然のことかもしれませんが「売上を伸ばすため」に使われるものという認識が強いのではないかと思います。マーケティングの手法や技法は「お金」と密接に関係しているという認識がありますが、本来のマーケティングは「想いを伝える」ために使われるのではないかと考えています。
当時のマーケティングは利益重視ではありましたが、最近は顧客とのコミュニケーションを重視・可視化するマーケティングや顧客とのつながりを構築するLTVの考え方も浸透してきて「マーケティング → 利益重視」という考え方も変わってきており、「想いを伝える」という部分にやっとシフトしてきたのではないかと感じています。
2008 / Web
インディレーサー ロジャー安川さんの公式サイトデザイン・構築。ギャラリーや試合情報などを掲載するALL FLASHのサイト構築とMovable Typeでのブログ構築。
制作概要
インディレーサー ロジャー安川さんの公式サイトデザイン・構築。ギャラリーや試合情報などを掲載するALL FLASHのサイト構築とMovable Typeでのブログ構築。現在公式サイトは閉鎖されています。
Actionscript3
2003年あたりから大ブームだったFlashに大きな変化がやってきました。AS2からAS3へ言語が大幅に変更されたことです。その後、Flashのソフト自体も作り方が変わってきてしまい、作り手側は「新しい」と「古い」の狭間に立たされて、結局大本であるFlash自体が終焉を迎えるとは・・。
現在、ロジャー安川さんも2010年からは佐藤琢磨さんの専属スポッターとして契約し活動をはじめて注目を集めています。
余談ではありますが、「ブログを書き始める!」と言って、オープンしたての銀座アップルストアで速攻最高スペックのMacbook Proを購入してたのを見て、レーサーの決断の速さも目の当たりにしました(笑)
2003 / Web
「海とつながる。そして人とつながる」メディア&SNSを構築。日本全国の海岸が登録されています。
制作概要
「海とつながる」をテーマにwordpressのbuddypressとeventmanagerでローカルSNSを制作しました。人と人がつながるソーシャル・ネットワークではなく、場所とつながり、そこで人とつながることを大切にしたいという想いで立ち上がったサービスです。
umiとunionで「umion」
umion(ウミオン)のネーミングから参画していたため、サービス名の決定からロゴの制作からはじまりました。umi(海)とunion(団結などの意味)を持たせるため、シンプルで親しみやすいロゴにしました。umionは海をもっと身近に感じてもらい、海の素晴らしさを再認識してもらうと同時に、海で活躍するアスリートたちを応援できるような発信をするプロジェクトです。
機能が多すぎるbuddypressをカスタマイズ
buddypressはwordpressをかんたんにSNS化できるプラグインで10年以上開発が進められていますが、サーバースペックが低いと激重になったり、運用管理のルール決めがとても難しくなるため日本ではあまり利用例を見ることがないプラグインです。多すぎる機能をピックアップしてひとつひとつをカスタマイズしてSNSを構築。さらにはイベント管理プラグインの「Event Manager」と連携できるようにもカスタマイズしました。
「人と人がつながるSNS」ではなく「海とつながる」ということ、そして「海から人と人がつながる」という導線を活かすため、新規登録しても人とつながることもできないし、知り合いを検索することもできません(笑)。まずは「海とつながって」そこでアスリートやライフセーバー、友だちとつながれるという想いを大切にしているので、他のSNSとは使い勝手が全然違うものになりました(これから変わるかもしれませんが)。
海とつながるため、日本全国の海水浴場800以上の名称と住所、地図データを作成しました。ECサイトの商品登録に似て気の遠くなる作業でしたが、上限があるデータ作成はモチベーションが保てますね(笑)。
新型コロナウイルスの影響で日本全国の海水浴場が開催されないという状態にオープンしました。これからどう育つのかが楽しみなサイトです。
2020 / ロゴデザイン・サイト構築
umion
制作概要 株式会社自然エネルギー市民ファンド 公式サイト構築。 「ささっと」「ぱぱっと」というよくある制作依頼(笑)でリニューアルをしました。報酬 …
制作概要
株式会社自然エネルギー市民ファンド 公式サイト構築。
「ささっと」「ぱぱっと」というよくある制作依頼(笑)でリニューアルをしました。報酬も「晩ごはんで・・」というものでしたが、これからの時代に必要なエネルギーであり、社会を良くする活動なのでプロボノ制作という感じです。風車がメインのファンドではありますが、地域エネルギーには風車以外にも太陽光や地熱、バイオマス発電など様々な方法があり、とても興味深い内容です。
リニューアルコンテンツで変更点が役員名くらいでしたので、特段面白いコンテンツが増えたわけではなく、過去サイトのカテゴライズとWordpress導入がメインで制作しました。更新もあまりない・・ということでしたのでよく使うVisual Composer なども導入せず、手打ちで久しぶりに組んでいきました。
HTMLやWordpressの知識のない、現場のスタッフが良く更新するときにはVisual Composerは大いに役立ちます。ですが、製作者としてVisual Composer慣れしてしまうとどんどん知識が落ちていく・・と久しぶりにVCなしの制作で感じました。
2019 / Webデザイン
株式会社自然エネルギー市民ファンド
制作概要 美容室のWebサイト制作。 なんと必須のお題目が「髪の毛1本も見せてはいけない」というもの。スタイリングの写真もなく写真素材も無しでつく …
制作概要
美容室のWebサイト制作。
なんと必須のお題目が「髪の毛1本も見せてはいけない」というもの。スタイリングの写真もなく写真素材も無しでつくるというものでした。当時は「なんでこんなお題を・・」と感じていましたが、お店に来てくれた方がすべてのターゲット。最近でいうと「リアルからネットに来てもらって、プル(心を確実に掴む)する」というものだったんですね。
ミニマムでも見た人に驚きを
jqueryも登場まもなく、スマホもない時代です。画面の解像度サイズも多様化してきた時代です。「ミニマム」に作ることでそんな不安要素はすべて無くなります。ですが、小さく作るだけではひとつも面白くないのでPjaxがまったく定着していませんでしたが、コンテンツ部分に導入。
コンテンツ部分は美容室の「鏡」と「照明」をライントレースしているのですが、Pjaxで読み込まれるのは「鏡の中」にしました。こんな多角形な形の中にコンテンツが読み込まれるのですが、HTML5ではないのでCANVASでマスクをすることは出来ません。
ものすごく単純なのですが、白い鏡(真四角)の透過ピングの下にDIVを配置してそこにPjaxでコンテンツを読み込んでいるだけです。そのせいでリンク設定などはコンテンツエリアには設定できないという難点があったのですが、別にリンクさせるものはなかったので良しとしました(汗)。
2011 / Web
制作概要 主に国外のアーティストを招いている都内のライブレストランのバレンタインデー特別コンサートページデザイン。時代はまだスマホはありませんでし …
制作概要
主に国外のアーティストを招いている都内のライブレストランのバレンタインデー特別コンサートページデザイン。時代はまだスマホはありませんでしたが、大画面・高解像度のディスプレイが増えてきた中、800×600の標準画面サイズが崩れてきたときのデザインでした。
どれを背景にしてどこがコンテンツか
jqueryも登場まもなく、スマホもない時代。
だけども、画面サイズが1024pxだと大きすぎるし800pxだと物足りない。960pxにしよう!という流れまで制作現場は毎回どのサイズで作るか悩んだ時代でした。そんな中、どうやって高解像度の人にも低解像度の人にも豪華に魅せることができるかを悩んだ結果「境界がわかりづらい背景画像」を使うことにしていました。
ちなみに、背景のバラは一輪だけを切り抜いて敷き詰めてブラシで陰影処理を。カーテンの部分はお決まりの「生肉」の加工品です(笑)。
すごく単純に背景画像を大きい画像で豪華に配置しただけなのですが、たったそれだけで800pxで作っていると見えない感じになるんですよね。はみ出している装飾の部分も大きめの背景画像です。さらに、ダイヤの煌き大小をsnow.jsでほどよく降らせて豪華さを増しました。
レスポンシブの登場でこんな苦労はなくなりました。さらにスマホの登場とフラットデザインあたりでこういったゴテゴテなデザインを使っているサイトも無くなりましたが最近少しだけ増えてきたような気がするのは気のせいでしょうか?
2011 / Web
制作概要 イラストレーターfeebee公式サイトの制作。サイトのトップページ用に描いたイラストをFlashで動きをつけました。現在はリニューアルさ …
制作概要
イラストレーターfeebee公式サイトの制作。サイトのトップページ用に描いたイラストをFlashで動きをつけました。現在はリニューアルされています。
Flashで雪を、まばたきを。
Flashはやはり、面白かった。
まばたき用のパーツと雪、左右にはゆらゆらとしたカーテンのような部分をアニメーションさせることで決められたページ幅を感じさせないようにしました(腿の部分からが背景画像)。なんとも、実物はWeb Archivesとかにしかないので説明が難しいのですが・・動きは極小なのですが結構かっこよくできました。
今の時代JSやCANVASを使えばできるのかもしれませんが、やっぱりFlashは面白かったですね。
2010 / Web
Feebee
制作概要 さわかみオペラ財団の出演者オーディションのWebバナー制作。facebookとtwitterなどでの告知バナー画像として4枚制作しました …
制作概要
さわかみオペラ財団の出演者オーディションのWebバナー制作。facebookとtwitterなどでの告知バナー画像として4枚制作しました。4枚とも過去のオーディションに合格した方々でこのオーディションをきっかけに世界の舞台へと羽ばたいた方もいらっしゃいます。キャッチコピーはオーディション担当者が熱い想いを込めたキャッチを採用しました。
常に「テスト」「分析」
4枚作ったのはクリエイティブテストの結果を残したい思いからです。
漠然と「女性歌手の方が受けがいい(気がする)」や「赤のほうが反響がある(気がする)」といった誰にでも結果がわかるようなテストを含めた「クリエイティブ・テスト」を実施するのが目的でした。コンバージョンももちろん必要ですが、こういった小さなテストで自社のエビデンスを積み重ねていくのもとても大切なことだと考えているからです。
また、それぞれのSNSが持つ特性やオーディエンスも把握することができるので本番(コンバージョンを必要とするもの)に備えて、「SNS上での自社の特徴」をチームで共通認識を持つことも大切だと思います。なぜなら、SNSマーケティングはすでにファンになってくれている人たちを数値化・可視化し、仮説を建てることからはじまるからです。
紅白・男女
すべて文言は一緒です。(イタリア語もありますが)
違いは写真と色。チーム内の予想は「赤で女性」が一番ビュー数とエンゲージメントが高いと予想していました。結果、その通りでした。ここでマーケティングを考えていなかったスタッフが「実際そこから応募されたか?」という疑問が生まれました。
ここから、社内のエビデンスが蓄積されていきます。
たとえば「白で男性」のエンゲージメントは低かったが、男性のコンバージョンは高かったという結果があったとします。その場合「赤の女性はなぜ応募にいたらなかったか?」「白の女性はどうか?」・・などマーケティングを意識していなかったスタッフがたった4枚のバナーとわずかな数値から想像を膨らませて話し合うことで世の中のマーケティングセオリーやテクニックではない、社内だけのエビデンスが積み重なりはじまります。
「きれいでかっこいいものづくり」から抜け出すことができるタイミングでもありますし「一発入魂マーケティング(1回の広告に多額を投資する)」ではなくチームメンバー全員が長期的なストーリーを考えながら目標に進むことができることにつながります。
たったバナー4枚ですが、運営と顧客・演者を動かすことができた制作でした。
2019 / Web Banners
公益財団法人さわかみオペラ芸術振興財団