2021年1月26日追記 事業の成長に伴い、採用活動を通年で行うことになりました。よろしくお願いします！ 業務委託（フリーランス）として案件ごとにコラボレーションさせていただける方も常時募集しています。こちらよりご連絡下さい。 わたしたちの会社も設立して9期目が終わり、心あるクライアントの皆さま、取引先の皆さまの支えによって、順調に事業を成長させることができています。 特に最近はアウトバウンドの営業を行わなくても新規案件のお問い合わせが1ヶ月に10件程度あり、うち9件は人手不足で断らないといけない状況になっています。 それに伴い、新しい仲間を募集しています。 以下ご覧のうえ、条件に合致し、わたしたちの会社で働くことで幸せになれそうな予感のする方は奮ってご応募ください。 ビジョン art and tech for retail アートとテクノロジーが交差する場所でチームによる創造を行い、EC

本記事は、ヘッドレスコマースサイトの実装解説、第二回です。 第一回をお読みでない方は、こちらからご確認ください:) こんにちは、エンジニアの川島です。 前回の解説記事投稿から三週間ほど経ちましたが、皆様いかがお過ごしでしょうか。 私は三月下旬からリモートワークに移行し、自宅より本記事を執筆しています。以前から週に一度はリモートで勤務していたので、業務環境そのものは整っているのですが、二週間以上ぶっ通しで続くとなかなか大変ですね……。オフィスでのちょっとした雑談が、コーディングにかなり役立っていたのだなぁと感じています。 さて、前回の記事では、ヘッドレスコマースサイトの実装環境を構築しました。 さっそく実装……といきたいところですが、本記事では、実装着手前に検討しておくべきポイントをまず解説します。ECサイトのWebデザインについても、補足的に言及しています。 本工程を飛ばして実装に入ると、

このリニューアルで、ヘッドレスコマース構築に関する多くの知見が得られました。 ヘッドレスコマース構築のメリットとデメリット、技術スタックについては、弊社代表の高崎が以下の解説記事を公開しています。 高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」でShopifyサイトを作っての学び 記事内でも言及されているように、2020年3月現在、ヘッドレスコマース構築の日本語情報はまだあまり多くありません。 そこで本特集では、実装に携わったエンジニアの立場から、ヘッドレスコマース構築の概要と、実装時に躓きがちなポイントを、連載形式でお伝えしてゆきたいと思います:) ヘッドレスコマース構築の情報を探している方の一助となれば幸いです。 連載内容は下記を予定しています。 第一回：イントロダクションと環境構築　※本記事です 第二回：ヘッドレス実装前に検討すべきこと、ECサイトのWebデザイン

こんにちは。代表兼CTOの高崎です。 この前、自社運営の出版レーベルのECを高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」形式でリニューアルしました。 ヘッドレスコマースとは 海外のD2Cと呼ばれるテクノロジーを重視した製造小売で標準となっている次世代型のEC技術で、 データ（バックエンド）とデザイン（フロントエンド）の分離が特徴的なECサイトの作りです。 メリット 1.高速 以下は海外ECサイトがヘッドレス化する前と後で速度がどのように変わったかの例です。 左がShopifyを使ってヘッドレス化したサイトの映像で、右が旧来のECサイトです。 ご覧いただければスピードの差が一目瞭然かと思いますが、「サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する。」と言われる通り、高速であることはECサイトの売上に直結します。 また、高速なサ

ShopifyのInstagramフィード表示方法が変わります。API変更（2020.3.31）以降の代替アプリ導入手順をご紹介 2月28日追記 Instagramの旧API廃止は、以前アナウンスされていた2020年3月2日から、3月31日に延期されました。 https://developers.facebook.com/blog/post/2019/10/15/launch-instagram-basic-display-api/ February 20, 2020 Update: To provide you with more time to make changes, we will now be shutting down the Instagram Legacy API Platform on March 31, 2020 instead of March 2, 2020 as

｢自分だけがわかっているが世の中にないものがあるとき｣ にものづくりがはじまる — D2Cブランドobjcts.ioのものづくり こんにちは。アートディレクターの佐藤です。 去る11月30日、『“objcts” & thoughts　Takramと語るプロトタイピングとコンテクストデザイン』に参加してきました。 objcts.ioさんのPop-Up Store 兼 Community Workspaceで行われたこちらのイベント。ワークショップあり、パネルディスカッションありで様々な学びを得られたイベントだったので、みなさんにも共有できればと思います。 デザインイノベーションファームTakramの渡邉氏、緒方氏とobjcts.io角森氏が登壇 渡邉康太郎氏（Takram） デザインイノベーションファーム Takramのコンテクストデザイナー/マネージングパートナー。慶應大学SFC特別招聘教

こんにちは、エンジニアの川島です。 前回の記事にて、Shopifyのテスト環境構築についてご紹介しましたが、Shopify開発において特に悩ましいのが各環境の同期とバージョン管理ではないでしょうか。 管理画面上のコードエディタ・テーマエディタから誰でも編集できること、そしてTheme Kitのdeploy機能でShopifyサーバーへ容易にファイルを反映できることは、長所でもあるのですが、複数人で開発を行う場合には先祖返りのリスクにもなります。 そこで本記事では、複数人でのShopifyテーマ開発を安全に進めるために、私たちが行っているバージョン管理の工夫について、ご紹介したいと思います。 ※本記事では下記を前提とします。 Shopifyストアの管理画面にアクセスできる Shopifyテーマ開発において、本番環境に加えテスト環境を利用している Shopify Theme Kitをインストー

こんにちは、アートディレクターの佐藤です。 このたび、Shopifyサイトのテーマ開発・デザインをする際に役立つ、Adobe XDワイヤーフレームキットを作成しましたので、無償配布します。 Shopify未経験の方がオリジナルテーマをデザインする際に、テーマ構造を把握する意味でも役立つかと思います。

こんにちは、代表兼エンジニアの高崎です。 寒くなってまいりましたが、皆様お体の調子は大丈夫でしょうか。 私達の会社では「世界観を作ってモノが売れるを、すべての人へ。」をミッションに主に製造小売のお客様のECサイトを制作しているのですが、現在、高速で開発効率の高い次世代のECサイトの作り方「ヘッドレスコマース�」を研究しています。 この記事では基本を共有できればと思います。 ヘッドレスコマースとは 従来型のECサイトが「デザイン（フロントエンド）」と「データ（バックエンド）」が一体化していたのに対し、ヘッドレスコマースは、「デザイン」と「データ」がきれいに分離したコマースサイトの作りです。 ヘッドレスを採用する理由 主にサイトの動作速度と開発効率を上げることができることから海外のD2Cブランドのサイトで採用が進んでいます。 とくにサイトの表示速度が２秒遅くなるだけで直帰率は50%増加すると言

こんにちは。アートディレクターの佐藤です。 去る11月14日、『D2C Path「D2Cブランドのはじめかた｣』に参加してきました。 貴重なお話ばかりで様々な学びを得られたイベントだったので、みなさんにも共有できればと思います。 D2Cのトップランナーによるセッション内容 イベントは、国内のD2C事例として先駆的な取り組みをされている下記のみなさんによるパネルディスカッションがメインでした。 株式会社FABRIC TOKYO　森 雄一郎氏 オーダーメイドスーツなどを扱うD2Cブランド「FABRIC TOKYO」の代表で、今年9月に新ブランド「STAMP」を立ち上げられました。 無人店舗で行う超高精度の3Dスキャンによる採寸で、カスタムオーダーデニムを注文できます。 全く新しいユーザー体験、ファッションブランドとしての洗練された世界観など他の追従を許さないブランド構築をされながら、旧態依然と

こんにちは。アートディレクターの佐藤です。 ｢デザインスプリント｣ は、Googleが提唱している、課題に対する解決策を見つけるため短期間のうちに仮説検証を行うフレームワークです。 5日間でプロダクトのプロトタイプ作成とテストまで行うプログラムになっています。 私たちは自社サービスのためにデザインスプリントを行った経験がありましたが、クライアントワークでも有効なはずと考え実践したところ非常に大きな学びがありました。 今日は、その学びを共有したいと思います。 デザインスプリントをクライアントワークで導入した理由 私たちはクライアントワークで、ECサイトを制作しています。 数多くのECサイトを見てきましたが、実店舗の業務に押されて更新が滞り伸び悩むECサイトも少なくない中、成功するサイトは、スタッフの方が主体的にサイトの世界観に沿ったコンテンツの更新を行っていることに気づきました。 どうすれば

Shogunについて Shogunは、画面上の要素をドラッグ＆ドロップするだけで、ページを作成・編集できるコンテンツビルダーです。ShopifyやBIGCOMMERCEなどのECプラットフォーム向けに提供されています。 （Shopifyの場合）料金プランは3種類で、より上位のプランではページ分析やABテストも利用できます。 ページ構築には最安のBuildプラン（39ドル/月）でも充分ですが、後述するカスタム要素を活用するには、Measureプラン（99ドル/月）以上の契約が必要です。 Shogunの基本的な使い方については、下記の記事が参考になります。 https://www.s-bokan.com/blog/post-18810/ また、Shogunは公式のドキュメントも充実しています。英語記事ではありますが、GIF動画を交えた操作解説が多く、分かりやすいので、ぜひ参照してみてください。

こんにちは、代表の高崎です。 Shopifyは優れたプラットフォームですが、海外製のプラットフォームということもあってデフォルトでは注文者や配送先のお名前のふりがなを取得することができません。 これは注文後、電話や店頭でサポートを受け付ける可能性のあるお店にとってちょっと不便なので、対策を調べてみました。 １. Shopify PLUSを導入する Shopifyはエンタープライズ向けにShopify PLUSというプランがあり、そのプランではチェックアウト画面と呼ばれるお客さんが配送情報を入力する画面を自由にカスタマイズできるので、ふりがな入力欄を用意することが可能です。 メリット お客さんにとって一番自然な形で実装できる。 デメリット Shopify PLUSの値段は、非開示ではあるものの20万円/月以上すると言われておりコストはかかる。 2. 会員登録を必須にする Shopify PL

Shopifyテーマの基本構造 Theme Kitを利用して新規テーマを作成すると、内部構造は下記のようになっています（2019年10月現在）。 Shopifyテーマに必要最低限なファイルで構築されているため、オリジナルのテーマ作成時は、これらのファイルを足掛かりとして開発を進めてゆきます。 なお、Theme Kitの作成内容には含まれていないものの、一般的なテーマではsectionsディレクトリやsnippetsディレクトリも利用する機会が多いため、手動で追加しておくと良いでしょう。 theme ├assets/ ｜├application.js ｜└application.css.liquid ├config/ ｜├settings_data.json ｜└settings_schema.json ├layout/ ｜└theme.liquid ├（sections/ ※自身で追加する

Shopifyテーマカスタマイズの始め方。ローカル構築〜複数環境への反映まで【2021春Update】 こんにちは、エンジニアの川島です。技術記事ではお久しぶりですね:) 私たちの会社では、現在、Shopifyを活用したECサイトのコンサルティング＆開発案件を多く進めています。 「Shopify」って？　という方は、弊社代表の高崎と、デザイナー佐藤による、Shopify解説記事もぜひ合わせてご覧くださいませ。 マーケター＆エンジニア視点から見たShopify導入のメリット デザイナー視点でみる「Shopify」：デザインのカスタマイズでできることと留意点 Shopifyは世界175カ国80万店舗以上に利用されているECプラットフォーム（※2019年2月時点）ですが、日本法人立ち上げから2年経っていないこともあり、開発者向けの日本語情報はまだまだ少ないです。 本記事では、Shopify開発を

your shopify team 共創型 Shopifyサイト構築・運用支援 コンサルティング・デザイン・エンジニアリング・マーケティングを一気通貫して支援。Shopifyテーマによる構築のみならず、次世代型ECヘッドレスコマースによる構築も可能。あなたの会社の外にいる内製Webチームとして価値提供に貢献します。 technical consulting 財務三表を理解したエンジニアが行う テクニカルなアドバイス Shopifyでサイトをつくるうえでの技術的な懸念点の洗い出し、構築上の課題などについて、テクニカルなコンサルティングを行います。Shopifyを用いたヘッドレスコマース(Hydrogen)サイトやShopifyアプリの構築経験があるエンジニアが、ビジネスを立体的に眺めた上で、課題についてともに考えていきます。｢実際に構築する前にシステム構成をチェックしてもらうことで、見落とし

こんにちは、代表・エンジニアの高崎です。 私達の会社では、国内主要ネットショップ作成サービスのカスタマイズから、０からオリジナルのECサイトをスクラッチ開発した経験もあるのですが、ネットショップ作成サービスは安価に導入できる反面カスタマイズ性がいまいち、０から作るとカスタマイズは自由にできるが費用がかかり、メンテナンスも大変という課題を抱えていました。 そんな課題を抱えていたときに「Shopify」に出会い、安価に導入できるのにカスタマイズ性が高いと感じたため、先日実際に弊社で運営しているECサイトでも導入しました。 この記事では実際に運用してみてわかったShopifyのメリットをマーケティング、エンジニリングの観点から解説します。 １．デザインと機能のカスタマイズ性が高い Shopifyは独自のテーマ作成言語を持ち、APIも公開されていて、デザイン、機能のカスタマイズ性が非常に高いです。

こんにちは、アートディレクターの佐藤です。 世界最大のECサイト制作プラットフォームであるShopify（ショピファイ）。 多言語、多通貨にも対応しており、日本でも導入が広がり注目を集めています。 Shopifyはデザイナー視点で見ても、デザインのカスタマイズ性が高い優れたプラットフォームです。 そこで今日は、Shopifyのデザインカスタマイズについてまとめてみたいと思います。 ※本記事は既成テーマの簡易的なカスタマイズについての解説記事です。コード編集を伴う本格的なカスタマイズ手順については下記記事も併せてご覧ください。 Shopifyテーマカスタマイズの始め方。ローカル構築〜複数環境への反映まで【2019秋版】 Shopifyテーマの構造解説。各ディレクトリとファイルの役割を知る コード編集なしで直感的なページ作成も可能なコンテンツビルダーアプリ「Shogun」の使い方については下記

こんにちは。エンジニアの川島です。 先週公開したこちらの記事でもご案内したとおり、2019年7月より、私たちノンスタの技術顧問として、株式会社OTAシステム開発のCEOである太田直毅さんが就任されました。 このたびの技術顧問就任を機に、太田さんをお招きし、弊社代表の高崎と一対一で対談を行っていただきました。その対談の様子を、前後編に分けて皆さまにもお届けします。 太田さんは、データベースからWebアプリまで、幅広い領域を30年に渡って活躍してきたフルスタックエンジニアであり、経営者でもあります。 そんな太田さんと高崎は、もともと旧知の間柄でした。 30年前のWeb黎明期、互いの出会いと現在の取り組み、そして今後の展望まで、二人の会話は過去から未来へと広がってゆきます。どうぞゆるりとお付き合いください:) 本日のゲスト：株式会社OTAシステム開発 代表取締役/エンジニア 太田直毅氏 1969

2019年7月より、フルスタックエンジニアの太田直毅さんが私たちの会社の技術顧問に就任しましたのでお知らせします！ 太田直毅さんプロフィール 株式会社OTAシステム開発社長/エンジニア。 1969年、仙台生まれ。大学卒業後に米国系の通信会社に就職し、 日本初の商用インターネットサービス立ち上げに、プログラマとして参加。 1998年に独立し、WEBアプリケーションの開発を中心に活動。 2017年に法人化し、株式会社OTAシステム開発を設立。 フルスタックエンジニアとして、システムを使う人の気持ちを考えながら、システム全体の構成を考えることを大切にしている。 またシステム開発に加えて、技術相談や技術教育などの活動も行なっている。 趣味は、アウトドア、家族キャンプ、絵を描くこと。 太田さんに就任をお願いした理由 太田さんに技術顧問への就任を依頼した理由は2点あります。 技術力が高いだけでなく、シ