見出し画像

弊社の実装専門サービス「ADRIATIC CODE」について

Dai Yosinaga

こんばんは、株式会社SETSUNA、ADRIATICの吉永です。

奈良でWeb制作を中心としたデザイン事務所をやっています。
そんな弊社は最近いろいろありました……
詳しくはこの間書いたnoteをご覧ください。

読んで頂くと分かりますが、弊社はデザイナーが抜けて、エンジニアだけの会社になりました。
ただ、僕の意向として、デザイン会社としてこれからも続けていきたい。
なので、デザインを含めたWebサイトの制作を請けることは今後もいままで通り継続していきたいと思っています。

弊社実績はいまはPinterestとかXとかでしか見れないのですが、私もADRIATICとしてのデザインの心は受け継いでいますので、ご依頼お待ちしています。

実装のみを請けることについて

そんな中、実装のみのご依頼は以前からちょこちょこありました。
その実績を基にして、実装のみのサービスを立ち上げることにしました。

現在、弊社は少人数体制であるため、私がディレクションを行いデザイナーに依頼し、エンジニアが実装を担当する体制では工数が増えてしまいます。そこで、実装のみのご依頼にも重点を置き、積極的にお受けしていく方針にしました。

折角であれば、「ADRIATIC CODE」という名前を付けて実装専門サービスを立ち上げていままでより一層、実装のみの案件を積極的に請けることにしました。

ロゴやWebサイトは鋭意制作中です👊
取り急ぎ、Notionでページを作ったので、特徴や実績はこちらをご覧ください。
また、Notionのフォームも設けておりますので、お気軽にお問い合わせください。

主な実績

主な実績をこちらでも紹介します。

株式会社With Midwife

https://withmidwife.jp/

株式会社NASU様からのご依頼で株式会社With Midwife様のWebサイトの構築を担当いたしました。

印象的なタイトルのアニメーションや、ページ遷移時の背景のインタラクションなど、フロントエンドの実装難易度が高いサイトでした。
デザインも先鋭的でそれを活かせるようなコーディングを意識し、実装後も細かく調整しました。

サイトの様々な部分がWordPressで更新できるようになっています。

個人的に工夫を凝らした部分は、チーム紹介のページのポップアップ部分です。
ポップアップ自体がスライダーになっており、その人をクリックしたらポップアップのスライダーのその人の詳細が表示されるように実装をしています。


株式会社はりま家

https://www.harimaya-co.com/

ミトネデザイン様からのご依頼で株式会社はりま家様のサイト構築を担当いたしました。

シンプルなデザインなので、派手なことをしてデザインの邪魔をしないように意識して実装しました。

実装で少し工数を掛けたのは、商品案内のページです。
ランダムに表示しながら、カテゴリーをjsで切り替えれるように実装しました。


サタケシュンスケ

https://shunsukesatake.com/

株式会社NASU様からのご依頼で、イラストレーター・サタケシュンスケ様のポートフォリオサイトの構築を担当いたしました。

このサイトはフロントエンドの構築、WordPressのバックエンド構築、両方ともとても難易度の高いサイトでした。

まずトップページのメインに「テーマ別おすすめ作品」をいくつかご紹介しているのですが、テーマ別おすすめ作品のフォーマットは「〜◯選」となっており、1つのテーマにいくつかの作品が入っています。
なので、このメインビジュアルのスライダーの仕様は、
・テーマのスライド
・テーマの中の作品のスライド
という親と子両方にスライドが必要でした。
この仕様の実装は少し考えてうまく実装出来たと思います。

バックエンドでの肝はなんと言っても作品部分だと思います。

検索ワード、業種、使用媒体、カラー、タグを複合的に検索出来るようにしています。
また、検索結果のページでは、その複合的に検索したカテゴリーなどを外したり出来る機能も実装しています。
作品の一覧では、マウスオーバーすると一目でどんなイラストか分かるようにサムネイルが用意されており、詳細ページは印刷機能も実装しています。

あとは、ブックマーク機能。
作品はブックマーク出来て、あとで見返すことが出来ます。

弊社上田がとても苦労していたのが、PCのメガメニュー。
この部分は何か不具合を直すと別の不具合が発生したり、非同期遷移で思わぬバグが発生したり、とても大変でしたが、なんとかやり切ってくれました。

隠し要素もあったり、実装は大変だけどとても楽しく、勉強にもなったサイトでした。


yahae

https://yahae1921.com/

長岡 綾子様にご依頼いただき、日本一の靴下生産量を誇る奈良県・広陵町のヤマヤ株式会社様が2020年から始められたブランド「yahae」のオンラインショップを構築いたしました。

いまやECサイトのスタンダードになりつつある、Shopifyで実装しております。

今回の難しい点は、もともとあるShopifyサイトのリニューアルという点でした。

元のデータは残したまま、デザインを一新するということは今まで経験が無かったので、苦労しましたが、無事公開することが出来ました。

英語サイトにも対応しており、翻訳部分を含めて、サイトのほとんどのテキストを管理画面上で編集することが出来る仕様にしました。
この辺りは、上田がかなり頑張ってくれました。

Shopifyでの実装はyahaeさんのサイトのおかげで自信を付けれたと思います。

奈良県広陵町の靴下工場、ヤマヤ株式会社さんのブランド「yahae」のWebサイトのリニューアルデザインを担当させていただきました。 モデル撮影ではスタイリングやロケ場所コーディネートなども関わらせていただいています。 ここ数年、夏も冬も同...

Posted by 長岡 綾子 on Monday, June 17, 2024


黒木テック工業株式会社

https://www.kurokitec.com/

ミトネデザイン様からのご依頼で、遊園地の乗り物を製造する専業メーカー、黒木テック工業株式会社さまのコーポレートサイトを制作しました。

このサイトはデザインを見た時から、「とんでもなく難しそうだ…..」と感じていました笑

個人的に頑張ったのはトップページのメインビジュアル。
円の部分は最初はSVGの画像でclip-pathしていたのですが、safariでうまくいかず断念。円のclip-pathにSVGの画像を重ねて回しています。
その中に白い文字を入れ込んで、clip-pathの外にある黒い文字と重ねてメインコピーを作っています。
このコピーがスクロールした時にどのように消えるのかとか、次のコンテンツが出てくるタイミングとかは丸山さんと何度か詰めて着地しました。

あとは、製作ギャラリーのページ。
ランダムで表示しつつ、非同期でWordPressから投稿を取得するのは結構難易度が高かったです。

このサイトで苦労したのは、多用されているmix-blend-mode。
スタックコンテキストをちゃんと意識してコーディングしないとうまく行かない部分がたくさんありました。
ひとつ不具合を直したら、それが原因で効かなくなったり…..
これは勉強になった部分でもありました。

上田はフッター部分を頑張ってくれました。
100年企業を目指す黒木テックさんのキモとなるカウントダウンの配置や、その周りを回っている点をホバーした時に遊具が出てくる仕掛けなど、少し難しい実装だったと思います。

それ以上に頑張ったのが、黒木テックの歴史のページ。
スクロール位置によって、背景の西暦がその年にアニメーションして変わるという実装はかなり難易度が高かったと思います。
上田の成長を感じられる実装だったと思います。


MON architects

https://monarchitects.jp/

ミトネデザイン様からのご依頼で、建築設計事務所・MON architectsさまのWebサイトを制作しました。

黒木テックさんとまた違って、シンプルなデザイン。
この世界観を壊さないようにインタラクションも工夫しました。

フッター部分はmix-blend-modeと動画を合わせた演出になっています。

個人的に難しかったのはトップページのプロジェクトの右にあるスクロールバー。
プロジェクト部分がスクロールすると固定されるので、右のバーで進捗を示すことで下にもコンテンツがあることを明示しています。

WordPress部分の実装は上田が担当。
各プロジェクトの詳細ページでは、画像レイアウトの自由度を持たせつつ簡単に更新できるような仕様にしています。


ADRIATIC CODEが得意なことと、お問い合わせ

実績を見て頂くと分かりますが、WebGLを使った3D表現を駆使したサイトを作れるような技術力はありませんが、うまいことやるのは得意です。

弊社ではデザイン段階でかなりの余白がありました。
デザイナー曰く、余白をわざと残している（絶対めんどくさいだけ）らしいです。
なので、デザインを意識したコーディングをすることがとても得意です。
半分デザインをしている感覚でコーディングをしています。

どんな案件でも構いませんので、一度お問い合わせください。


おまけで、ADRIATICの最新実績

ADRIATICの最新の実績も紹介させてください✋

なんばにしわき形成・美容クリニック

https://nishiwaki-plasticsurgery.com/

6月に大阪難波で開院された、なんばにしわき形成・美容クリニックのWebサイトを制作いたしました。

きっかけは僕の中学校からの同級生の旦那さんが開院されるので、Webサイトを作って欲しいという依頼からでした。

このサイトは僕がディレクションを担当しています。
難しかったのが、形成外科専門医である院長が、形成外科と美容外科・美容皮膚科のクリニックをするにあたって、どちらを目立たせるわけでもなく両方とも同レベルで見せる必要がありました。

どうしても美容系のサイトとなると、綺麗な女性の写真を多用するサイトが多いのですが、形成外科は老若男女様々な患者様がいらっしゃるので、写真はその辺りを意識して撮影しました。

アールが特徴的な院内を意識したデザインとなっており、実装も派手なことはせず、やわらかい雰囲気を出せるように意識しています。

弊社では今まで通り、サイトの企画からデザイン、実装まで請けることが可能ですのでお気軽にお問い合わせください。

また、実装のみの案件もお気軽にお問い合わせください。

いいなと思ったら応援しよう！