人気のECサイト作成サービスShopifyは自由度が高く、オリジナリティ溢れるネットショップを作成することができるとあって注目を浴びています。 この記事ではそんなShopifyでできることをご紹介していきます。 Shopifyが気になる方 ECサイトを構築したい方 これらに当てはまる方におすすめの記事となっています。これを読めばShopifyがどんなサービスなのか、どう言ったことができるのかなど丸わかりですよ。 Shopifyとは Shopifyとは世界175か国、170万店舗以上で利用されており、グローバルでの流通総額が10兆円を超える世界シェアNo1のECサイト作成サービスです。 1から作成しようと思うと莫大なコストと時間がかかってしまうECサイト構築が、Shopifyでは簡単に行えます。 初期費用も安く、料金も月額制なので、簡単で管理も簡単。決済手数料も国内最安設定となっています。 BASEなど無料のECサイト作成サービスもありますが、そう言ったサービスは決済手数料が高く設定されていることが多く、一定の売り上げがあるショップでは損になってしまうことも。 Shopifyなら国内発行のカードなら決済手数料3.25%〜3.4%となっているので、一定の売り上げがあるショップでも安心して利用することができます。 Shopifyでできること オリジナリティ溢れるECサイト構築 Shopifyではオリジナリティ溢れるECサイトを構築していくことができます。 登録後、サイトの中身を視覚的にカスタマイズしていきます。デザインはテーマと呼ばれるテンプレートが豊富に用意されているので、その中から必要なものを選ぶだけ。 テーマの種類は公式のもので100種類、非公式のものを合わせると1000種類もあります。 さらにアプリで機能の拡張を行うことで、よりショップに個性を出すことができます。アプリの数は6000以上もあるのです。 「よりショップに個性を出したい」「完全オリジナルのデザインにしたい」という方は、Shopify構築を外注してみるのもおすすめですよ。 合わせて読みたい＞＞【重要】ECサイト外注時のポイント【Shopify（ショッピファイ） を構築するなら】 各種SNSとの連携 Shopifyでは様々なSNSとの連携を行うことができます。 Shopifyで連携可能なSNSは以下の通り。 Instagram Facebook Twitter Pinterest SNSと連携を行うことで、ECサイトへのアクセス数を増やすことができます。新規ユーザーを獲得する上での必要不可欠なステップと言っても過言ではないでしょう。 特にInstagramはネットショップとの相性がよく、潜在層への認知形成から、ファン化まで、幅広いターゲットに対してコンテンツを発信することができます。 ライブ配信機能やストーリーズ機能を利用することでユーザーと直接コミュニケーションをとることができたり、商品の細部まで見せることができるなど、アイディア次第で様々なマーケティングを行うことが可能です。 売れるECサイトの構築 Shopifyでは売れるECサイトも構築可能です。 せっかくECサイトを構築したのに、誰にも見られない、誰にも購入されないでは意味がないですよね。 先ほども言ったように、Shopifyでは連携できるSNSが豊富なのでそれらで集客を行うことが可能です。さらにSEO対策の機能も充実しています。 Shopifyでは細かなSEOの対策が可能です。編集可能なSEOの設定は、ストア全体のタイトル、ディスクリプションなど。 また、ECサイト運営で重要な問題でもあるかご落ちに対しても、Shopifyでは対策が取られています。 そもそもかご落ちというのは、お客さんが商品をショッピングカートに入れたものの決済を行わないままにしてしまい、結果的に買い物が中断されてしまうことを指します。 購入見込みがあるユーザーを逃さないためにも、かご落ち対策は重要なのです。 Shopifyではそんなかご落ちを防止する機能が備わっています。かご落ちをしたお客様に対して再度購入を促すようお知らせメールを送ったり、ECサイト内にポップを設置することができるのです。 越境EC構築 最後に、Shopifyの最大の強みでもある越境ECについてご紹介します。 越境ECとは海外向けにEC運営をすることです。越境ECを行うにあたって、言語の壁や決済、為替変動やセキュリティなど様々なハードルがありますよね。 それらのハードルを全て解決してくれるのがShopifyなのです。 Shopifyでは管理画面から、複数言語での販売の設定を行うだけで、自社ページをその国の言語に翻訳し、各言語専用のURLを作成することが可能です。 さらに、多通貨対応や多様な決済システムも魅力です。決済システムでは、中国で人気のAlipayやアメリカやヨーロッパで主要なPaypalなどにも対応しています。 セキュリティも金融機関のプログラム並に強固と言われています。 合わせて読みたい＞＞【安心】何故Shopifyはサーバーダウンしないのか？【サーバー障害への心配不要！】 まとめ いかがでしたか。本日は人気のECサイトShopifyでできることについて紹介していきました。 Shopifyでは売れるECサイトや越境ECなどを構築していくことができました。 そんなShopify構築を外注してみるのはいかがでしょうか。 dehaでは、オフショア開発で開発費を抑えてShopify構築を行うことができます。国内開発の相場から３割ほどコストを抑えた提案が可能です。 もし、Shopify構築についてもっと知りたい、エンジニアの質を知りたいという方がいらっしゃいましたら、お気軽にお問いわせください。 お問い合わせはこちら

JavaScriptはフロントエンド、バックエンド、ネイティブアプリなど様々な開発に利用することができ、海外でもメジャーな言語。 この記事ではそんなJavaScriptでできることを15個ご紹介していきます。 JavaScriptがどんな言語なのか知りたい方 プログラミングを学習したい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事です。これを読めばJavaScriptがどんな言語なのか、どう言ったことができるのかなど丸わかりですよ。 モーダル（ポップアップ画像） JavaScriptを使えばモーダル（ポップアップ画像）を表示させることができます。 モーダル（ポップアップ画像）は広告やお知らせなどをホームページなどに表示させることができる機能です。 クリックをしないとページが閉じないので、大事なお知らせをしたり宣伝に使うことができます。 サイトの利便性向上 JavaScriptなら文字色や背景色など装飾を変更させたり、タブを作ったりとサイトの利便性を向上させるアイテムを作ることができます。 他にもカーソル表示では、文字にカーソルを合わせると詳細情報を表示させることができます。 Ajax Ajaxとはページを移動しなくてもデータを取得したり表示させることができる機能です。 Ajaxを利用したページで有名なのが、Google Mapです。地図を自由に動かすことができるので、とても見やすい工夫がされています。 カウントダウンタイマー JavaScriptならカウントダウンタイマーを作成できます。イベントの通知などで利用することができます。 セールやイベントが開始するまで、終了するまでの表示を通しで設定できるので、一々設定し直さなくても良いのが便利です。 サイトのブラッシュアップ UIをブラッシュアップすることができます。 先ほど紹介したタブやカーソル表示など小さなことですが、工夫をすることでユーザーの満足度につながります。 リアルタイムで動くグラフ 1秒ごとにリアルタイムで動くグラフを作成することができます。株価のチャートや売上高などに活用できますよ。 動きのあるサイト JavaScriptではHTMLやCSSではできない動きを作ることができます。 例えば、画像が横にスライドすると切り替わることができるスライダーや、文字の点滅、背景デザインの変更などなど…。 JavaScriptで動きを作ることによって、サイトからの離脱率を下げ、お客様満足度の向上につながりますよ。 ソートや検索機能 JavaScriptのDatatablesのライブラリを使うことで手軽に表のソートや検索機能を利用することができます。 サイトをより見やすくすることにつながりますよ。 文字の爆発 fontBombというライブラリを利用すれば文字を爆発させることができます。 こちらを参考にしてみてくださいね。 お絵かきツール JavaScriptとHTMLのcanvas要素を活用すればお絵かきツールを作成することができます。 ちなみに、HTMLのcanvasはこの後紹介するゲームなどを作るのにも役立ちます。 サーバサイドで使う Node.jsを利用すればJavaScriptをブラウザ以外で動かすことができます。 Node.jsを使うことで、フロントエンドとサーバサイドで使う言語をJavaScriptで統一することができるので、プログラマーの負担を削減することにつながります。  Unityでプログラミングができる  UnityのプログラムはJavaScriptで簡単に作成することができます。そもそも Unityとはユニティ・テクノロジーズが開発しているゲームエンジンのことです。 あの「ポケモンGO」に使用されたことでも有名になりました。 ハイブリットアプリ ハイブリッドアプリとは、「Webアプリ」と「ネイティブアプリ」という異なる2種類のアプリの良い要素をハイブリッドしたアプリのことを指します。 アプリ開発では通常、iPhone用とAndroid用でそれぞれ開発をしなくてはいけません。しかし、ハイブリッドアプリなら1つの開発で両方のosで使うことができるのです。 また、アプリさえデバイスにインストールすれば、WindowsやMac、Android、iPhoneなど様々なデバイスで動作させることも可能です。 合わせて読みたい＞＞ハイブリッドアプリとは｜１０分で分かる！概要と作成方法 動くゲームが作れる JavaScriptならなんと動くゲームも作成可能です！ 例えばシューティングゲームやRPG、ブロック崩しゲーム、テトリス、タイピングゲームなど。 小さなゲームから作成していけば、良い学習にもなります。 ChromeやFirefoxなどの拡張機能を作れる […]

javascriptのフレームワークVue.jsは、リアクティブ、コンポーネントなど様々な機能を利用することができます。その他にもVue.jsにはできることがたくさんあります。 この記事ではそんなVue.jsでできることを詳しく解説していきます。さらに、反対に向いていないことなども紹介していきますよ。 これらに当てはまる方におすすめの記事となっています。これを読めばVue.jsがどんなフレームワークなのか、どんなことができるのか、どんなことが苦手なのか丸わかりですよ。 Vue.jsとは Vue.jsは世界中で多くの人が利用しているjavascriptのフレームワークです。javascriptには他にもReactやAngularなどのフレームワークも存在しますが、それらと比べてより学習コストが低いということで注目されています。 ドキュメントが充実していて、日本語情報の多いことから国内でも人気となっています。 そんなVue.jsはUIを作るために用いられており、拡張性も高いと言われています。 Vue.jsで記述してる箇所に、他のフレームワークの処理を入れ込んだり、画面の一部だけをVue.jsで記述したりすることができるなど、かなり柔軟に使うことが可能です。 Vue.jsでできること Vue.jsは主にWebアプリケーション開発で利用されることが多いです。 そんなVue.jsでできることでできることは以下の通りです。 それぞれ解説します。 リアクティブ リアクティブとは、ユーザーが打ち込んだ変更に対して一瞬で反応をすることを指します。 Vue.jsでは、ユーザーが打ち込んだ情報を保持するModelと、ユーザーが目にする値viewが連動していて、どちらかの値が変われば、すぐにもう一方も変更される仕様となっています。 少しイメージがしづらいかもしれませんが、リアクティブの一例としてExcelの関数があります。 Excelに数値を入力して、それをもとに計算する関数を記載すると、計算結果が自動で表示されますよね。 このような機能がVeu.jsで使えることによって、コードを短くすることができメンテナンスも簡単にすることが可能になるのです。 コンポーネント コンポーネントとは、プログラムをパーツ化し、それぞれを再利用していくことを指します。 車の部品のように各パーツを組み立てて、それらを最後に組み合わせることでトータルの労力を減らす効果があります。 トランジション トランジションは、HTMLやCSSの変更を行った際にDOMの内容も即座に変更することができる機能です。 ちなみに、DOMは「Document Object Model」のことでHTMLドキュメントをプログラムから利用するためのAPIのこと。 HTMLドキュメントの中の「何処」に変更を与えるのか指定し、任意のプログラムを実装することを指します。 通常、Webブラウザに画面を表示する時は、DOMからHTMLを解析してWebページを表示します。 しかし、これではHTMLの変更の度にWebブラウザの読み込みをしなくてはいけません。 一方、トランジションを利用すれば、こうしたWebブラウザの読み込みは必要ありません。 HTMLを変更すればDOMも変更されるので、業務を大幅に効率化していくことが可能になるのです。 拡張性 Vue.jsはシンプルな設計ということもでき、拡張性がとても高いです。 他のライブラリ と組み合わせ、様々な開発に適用することができます。 また、後からでも導入ができたり、後から必要になった機能を追加することも特徴です。段階的に規模を拡大していくと言ったことも可能なのです。 Vue.jsに向いていないこと Veu.jsではできることがたくさんありましたが、反対に苦手分野は何でしょうか。 それはズバリ、「大規模な開発」です。 Vue.jsではSPA（Single Page Application）の開発といった小規模な開発に向いています。SPAは1つのページ内で情報が変化するので、大規模なページやサービスには向いていないのです。 もし、大規模な開発を行うのであれば、ReactやAngularなどを活用するのをおすすめします。 合わせて読みたい＞＞2021年版　JavaScriptのフレームワーク5選！開発者向けにご紹介 Vue.jsのメリット・デメリット 今までVeu.jsでできることや向いていないことなど解説していきましたが、最後にVue.jsのメリットとデメリットを紹介します。 詳しい内容や他のフレームワークとの比較は「JavaScriptのフレームワーク！Vue.jsのメリット・デメリット」や「WEBアプリの開発言語・フレームワークのトレンド【オフショア開発】」を参考にしてください。 Vue.jsのメリット Vue.jsのデメリット まとめ いかがでしたか。本日はjavascriptのフレームワークVue.jsでできることや、向いていること反対に向いていないものなどを紹介していきました。 Vue.jsでは大規模開発やモバイルアプリ開発などには向いていませんが、SPA開発などには向いていて、学習コストの低いフレームワークでした。 リアクティブやコンポーネント、トランジションなど様々な機能があり、拡張性も高いVue.js。 気になる方は取り入れてみてはいかがでしょうか。 DEHAでは、本日紹介したVue.jsなどを利用したシステム開発も行っています。 […]

webアプリはWEBブラウザーからアクセスすることができる、オンライン上で様々な処理を行うシステムです。 iOSアプリやAndroidアプリといったネイティブアプリとは異なり、端末に縛られずに開発を行うことができるので、その分コストを抑えることができます。 今回はそんなwebアプリの開発費用について解説したいと思います。 webアプリの開発を行いたい方 社内のIT人材が不足している方 開発コストを抑えたい方 これらに当てはまる方におすすめの記事となっています。これを読めば、webアプリ開発の相場を知るのはもちろん、よりコストを抑えるコツも知ることができますよ。 webアプリの開発費用はどのくらい？ webアプリの開発費用の内訳は、「機能」と「人件費」「保守・メンテナンス費」「リスク費」です。 機能の数や種類が多いほど制作時間が長くなってしまうので、費用は高くなります。 また、導入・稼働後にバグ修正やOSなどのプラットフォームのサポート終了などに対応するためには保守・メンテナンスが必要です。保守・メンテナンス費は開発コストの15％をみておきましょう。 リスク費とは、開発中にトラブルが発生した場合や、開発期間が延びてしまう場合などに備えるために用意しておく、予備の費用のことを指します。 webアプリの相場 webアプリの相場は以下の通りです。機能をどのぐらいつけるのかによっても費用は変わりますが、一つの参考にしていただければと思います。 Webアプリの種類 費用相場 ECサイト 60~400万円 SNS 100~500万円 口コミサイト 80~300万円 掲示板サイト 50~300万円 ゲーム系 300~1,000万円 CMS 80~400万円 予約管理サイト 80~500万円 マッチングサイト 100~500万円 なぜネイティブアプリよりも安いの？ ネイティブアプリはiOSアプリやAndroidアプリといったスマートフォン上で、端末上のシステムを使って動かすことができるアプリです。 iphoneとAndroid両方でアプリを使うようにするためには、iOSとAndroidの両方のアプリを開発する必要があります。 その分開発工程がかかってしまうので、コストは高くなってしまいます。 一方、webアプリは端末に縛られずに利用することができるため、開発コストを抑えることができるのです。 よりコストを抑える方法 MVPを検討する MVP開発とはMinimum Viable Productの略で、その名の通り最小限に機能を削ぎ落としたシンプルなシステムを開発することを指します。 たとえば、ある特定のテーマに特化したSNSサービスの開発を考えていたとしましょう。 SNSサービスの機能は、タイムライン機能、チャット・DM機能、いいね・スタンプ機能、保存機能など様々なものが考えられます。 他にも、機能を追加しようと思えば様々な機能を追加することもできますが、MVPならこれらの１つか２つくらいの機能を実装するだけでリリースを行うのです。 最小限の開発に止めることによって開発コストを抑えることができるのです。  合わせて読みたい＞＞【スタートアップ向け】MVP開発とは【事業開発の新しい形】 ラボ型契約を検討する ラボ型開発とは、基本的にある 一定期間(半年〜1年)の間、あるお客様の専用のチームを用意し開発を行うという契約形態のこと。 修正が多いアプリ開発などでは、修正に追加費用がかかる請負型開発に委託するよりも、ラボ型開発のほうが低コストで済む場合が多いです。 ラボ型契約に関する詳しい内容についてはこちらの記事で紹介しています。気になる方はぜひチェックしてみてください。 合わせて読みたい＞＞【もう安心】ラボ型開発で、見積や雇用の不安解消！請負型開発との違いやメリットも解説【ODC/ラボ契約とは】 オフショア開発を行う オフショア開発とは比較的開発費用の安い海外で開発を委託する手法のことを指します。 […]

WEBアプリ開発をしたい場合、どのプログラミング言語を勉強するのがいいか迷う方もいらっしゃるでしょう。 沢山ある開発言語をただ闇雲に勉強しても意味がありません。 WEBアプリ開発に向いている言語とフレームワークを効率よく勉強することで、勉強時間を短縮することができるのです。 この記事では、そんなWEBアプリ開発におすすめの言語とフレームワークを紹介しています。 どの開発言語を学べばいいのか WEBアプリ開発に向いている言語は何か フレームワークって何？ これらの疑問をお持ちの方はぜひ要チェックですよ。これを読めばWEBアプリの開発言語とフレームワークのトレンドがまるわかりです。 WEBアプリとは WEBブラウザーからアクセスすることができる、オンライン上で様々な処理を行うシステムをWEBアプリケーションと呼びます。 YouTubeやTwitter、食べログなどがこれに当たります。 名前は似ていますが、iOSアプリやAndroidアプリといったスマートフォンのアプリとは異なります。 iOSアプリやAndroidアプリはネイティブアプリと言われ、基本的に端末上のシステムを使って動きます。よって利用するには端末にアプリをダウンロードする必要があります。 またネイティブアプリはiOSとAndroidそれぞれで開発を行わなくてはなりません。 一方、WEBアプリは端末に縛られずに利用でき、クライアントアプリをインストールせずに使えるなどが特徴としてあげられます。 おすすめ開発言語 php phpはWeb向けに特化した言語です。ブログやホームページ制作を行うことができる WordPressもPHPで構築されています。 歴史も長く、世界でも人気のある言語です。国内でも利用者が10万人以上いると言われています。 仕様や文法が簡単なため学習がしやすく、Web開発環境として非常に高いニーズがあります。CMSやECサイト、SNSなどさまざまなジャンルのWebサイトに用いられています。 phpのフレームワークLaravel phpのフレームワークLaravelは、PHPフレームワーク「Symfony」をベースに開発され、2011年6月に公開されました。 比較的新しいフレームワークであることから、様々な言語のフレームワークの良いところをかき集めたようなフレームワークになっています。 シェアが高くなるにつれて、さまざまな国・言語で利用できるようコミュニティや情報サイト、書籍などが多く作られるようになってきました。 日本語に翻訳されているものも多く、基礎から応用まで幅広く学べます。日本語に翻訳されている学習サイトや教材もあります。 Laravelはオープンソースで先進的な機能が多く取り入れられています。自由度が高く、規約も少ないので幅広い開発ができるのが特徴です。 合わせて読みたい＞＞【大注目】世界No.1のPHPフレームワーク「Laravel（ララベル）」がスゴイ！【その特徴を大公開】 javascript javascriptはWEBアプリ上の動きを作ることができる言語です。 例えば入力フォームやポップアップ、スライドショー、画像の拡大表示などがそれにあたります。 静的なページよりも動的なページの方がスタイリッシュで見やすいこともあり、近年javascriptの需要が高まってきました。 現在、JavaScriptは、ほとんどのWebサイトで使われていますが、その他にもWebアプリ開発やスマホアプリ開発、ゲーム開発など様々なシーンで使われているのです。 他にもjavascriptならフロントエンド・バックエンドの両方で利用でき、利用者が多いことから学習コストも低いといったメリットがあります。 合わせて読みたい＞＞定番？WEBアプリ開発でJavaScriptを技術選定する３つの理由【スマホアプリも人気】 javascriptのフレームワークVeu.js javascriptのフレームワークVeu.jsは主にUIを作るために用いられており、ドキュメントの充実度や日本語情報の多さから、国内で人気の高いフレームワークとなっています。 拡張性も高く、Vue.jsで記述してる箇所に、他のフレームワークの処理を入れ込んだり、画面の一部だけをVue.jsで記述したりすることができるなど、かなり柔軟に使うことが可能です。 合わせて読みたい＞＞​​JavaScriptのフレームワーク！Vue.jsのメリット・デメリット ruby rubyはWEB開発を効率よく行うことができる言語です。 日本のまつもとひろゆき氏によって開発されたこともあって、日本語での情報も多いです。 またRubyのコードはシンプルで書きやすく読みやすいので、プログラミング未経験者や初心者の方も扱いやすいのが特徴です。 rubyのフレームワークRuby on Rails Ruby on Railsは簡単なコードでWEBアプリを開発することができるフレームワークです。 Gemと呼ばれるライブラリを使って拡張することで更に短い時間で、様々なWebアプリを実装できます。 Ruby on Railsで作れるWebアプリは以下の通りです。 CMS ECサイト […]

Shopifyでは標準機能として装備されているお問い合わせフォームを自由にカスタマイズすることができます。 お問い合わせフォームのカスタマイズによって、ユーザーが、よりネットショップを利用しやすくなります。これにより満足度をあげることができます。 ユーザーの満足度が上がればショップの離脱率を下げることにもつながります。 この記事ではそんなShopifyでできるお問い合わせフォームのカスタマイズ方法について紹介しています。 Shopifyが気になる方 ネットショップを始めてみたい方 ECサイト構築を行いたい方 ユーザーの満足度を上げたい方 これらに当てはまる方におすすめの記事となっています。これを読めばお問い合わせフォームをより見やすく、わかりやすくすることができますよ。 Shopifyのお問い合わせフォーム Shopifyのお問い合わせフォームは、以下の項目が標準設定されています。 名前 メールアドレス 電話番号 メッセージ 管理画面からオンラインストアに移動し、「テンプレート」からコンタクトフォーム用のテンプレートを選択するをクリックすることで、お問い合わせフォームを作成することができます。 お問い合わせを受信するアドレスは、「設定」の中の「一般設定」、「送信元のメールアドレス」に記載されているものが該当します。 設定後は、実際に設定したメールアドレスにお問い合わせが届くかどうか、テストを行うことが大切です。 Shopifyでお問い合わせフォームをカスタマイズする方法とは？ 先ほど紹介したようにShopifyのデフォルトのお問い合わせフォームは、最低限の項目しかありません。 細かい部分をカスタマイズするには、Liquidを編集する方法とアプリでカスタマイズする2つの方法があります。 LiquidとはShopifyで利用されているプログラミング言語です。オープンソースとして、GitHubで公開されています。 プログラミングの知識がある方はLiquidを利用することをおすすめします。 Liquidのカスタマイズ方法 Liquidのカスタマイズ方法は、Shopifyの管理画面の「オンラインストア＞テーマ＞アクション＞コードを編集する」から行います。 その後、Templatesより「page.contact.liquid」を選択して内容を編集します。 アプリでのカスタマイズ方法 プログラミング知識がない方は、アプリを利用してカスタマイズをすることをおすすめします。 Shopifyには機能を拡張することができるアプリが6000以上あると言われています。お問い合わせフォームをカスタマイズするアプリも沢山あります。 ここでは4つのアプリを紹介します。 ​​Improved contact form Powerful Contact Form Builder Contact Form Wholesale + Ambassador Form ​​Improved contact form ​​Improved contact formはShopifyのどのページからでも問合せフォームにアクセスできるポップアップを追加できます。 ポップアップなので、お客様が質問したいタイミングですぐにお問い合わせフォームにアクセスすることが可能になるのです。 無料のプランから月額29ドルまであり、有料プランでは保存しておける問合せフォームの数を増やすことができます。 どのページから顧客がアクセスしたのかや、直前に見ていたページを調べるのに役立ちます。 Powerful Contact Form […]

Shopifyでは決済画面をカスタマイズして、入力項目や追加機能、デザインなどを調整することができます。 決済画面を見やすくカスタマイズすることで、お客様にストレスフリーにショッピングを楽しんでもらうことが可能です。 この記事ではそんなShopifyでできる決済画面のカスタマイズ方法について紹介していきます。 これらに当てはまる方におすすめの記事となっています。これを読めばShopifyでのチェックアウト画面の編集方法が丸わかりですよ。 Shopifyの決済画面 Shopifyには3つのプランがありますが、その3つのどのプランでもカスタマイズできるものは以下の通りです。 Shopify　Plusでは、コードの編集ができるため、氏名のかな入力や配置変更、配送時間指定の項目の追加やタグの設置など細かい設定が可能です。 合わせて読みたい＞＞【カスタマイズ力抜群】Shopify（ショッピファイ）とは？その特徴・費用・相場を徹底解説 Shopifyで決済画面をカスタマイズする方法 Shopifyで決済画面をカスタマイズする方法は以下の通りです。 ①Shopifyの管理画面から「設定＞チェックアウト」をクリックする 管理画面から「設定＞チェックアウト」をクリックすると、チェックアウトのカスタマイズというところがあるので、そこで現在設定されているテーマの編集を行います。 ②テーマの編集を行う テーマの編集は、以下の項目に対応しています。 バナー バナーは、決済画面の上部に表示されます。 ロゴ 決済画面の上部に表示されます。バナーが設定されている場合はバナーの内部に表示されます。 メインエリア メインエリアは個人情報を入力する欄です。背景のカラーや入力フォームのデザインを変更することができます。 注文内容 カートに入れた商品が並ぶ欄です。背景色の変更が可能です。 フォント 決済画面上のフォントを変更することができます。 ③アカウントの有効化 アカウントの有効化を行うことで、顧客が決済画面で入力する個人情報を省略することができます。 ④連絡先の設定 「お客様の連絡先」の項目で、注文後のお客様との連絡方法を設定します。 ⑤オプションの設定 「フォームのオプション」でお客様の追加情報が必要かどうかを設定することができます。 ⑥チップオプションの設定 購入した商品や送料の他にも、Shopifyではチップを追加することができます。 「チェックアウト時にチップオプションを表示する」を設定すると、お客様はオンライン購入の際にチップを追加してビジネスをサポートすることができます。 ⑦注文処理 注文処理の項目では、チェックアウトと注文イベントに関するストアの設定を変更することができます。 「お客様のチェックアウト時」では、チェックアウトボックスが2つありますが、どちらもチェックを入れておくようにしましょう。 そうすることで、住所の自動入力ができるようになります。 「注文の支払い後」では、注文の処理をどのように行うかを細かく設定することができます。 「注文のフルフィルメントと支払いが終了した後」の項目では、注文を自動でアーカイブするかどうかを選ぶことができます。 ⑧Eメールマーケティング Eメールマーケティングにチェックを入れることで、顧客はあなたのブランドのお知らせを受け取ることができるようになります。 事業者側もメールアドレスの管理が簡単にできるようになり、セール情報の配信やクーポンの配布、ギフト券の配布など、様々に活用していくことができまよ。 ⑨かご落ちメールの設定 かご落ちという言葉はご存知でしょうか。 かご落ちとは、購入意思のあるユーザーが、商品をカートに入れたままECサイトを離脱してしまうことを言います。 せっかく購入意思があったのに、見込み顧客を逃してしまうのはもったいないことですよね。 そこで、かご落ちしてしまったユーザーに対して、かご落ちメールを送信してみてはいかがでしょうか。 「この商品を買うはずだったのに、忘れていた」という方に購入を促すきっかけになります。 この設定は、チェックボックスにチェックを入れるだけで簡単に行えますよ。 ⑩多言語対応 Shopifyは越境ECにおすすめのECサイト作成サービスです。 海外向けのショップを作る際に、決済画面も多言語に対応させることができますよ。 カスタマイズのポイント テスト注文を行う カスタマイズを行った後は必ずテスト注文を行いましょう。テスト注文でエラーや不備がないかを確かめるのです。 […]

Ruby on Railsは、プログラミング言語Rubyのフレームワークであり、Web開発に非常に強いです。 今回はRuby on Railsを作って作れるものと、逆にRuby on Railsでは難しいことについてまとめます。 Ruby on Railsで出来ること Ruby on Railsは、Web開発に非常に強く、短い記述で多くの機能をかんたんに実装できるのが特徴です。 Gemと呼ばれるライブラリを使って拡張することで更に短い時間で、様々なWebアプリを実装できます。 以下に、Ruby on Railsで開発できる代表的なシステムをまとめます。 ブログシステム（CMS） WordPressのようなブログシステムのことをCMS（コンテンツ管理システム）と言いますが、Ruby on Railsを使えばオリジナルのCMSを作成することができます。 PHPで作られているCMSであるWordPressは有名ですが、内部のソースが複雑だったり、速度が遅かったりなどの問題も抱えています。 企業のオウンドメディア開発など、独自の機能を柔軟に追加したい場合や大規模サイトを作成したい場合、Ruby on RailsでオリジナルのCMSを用意したほうが良いこともあります。 ECサイト ECサイトやネットショップも、Ruby on Railsで開発できます。 ECサイト作成で大変なのは決済部分の処理ですが、Ruby on RailsでできているSolidusというシステムや、pay.jpのAPIを活用することで比較的かんたんに導入することが可能です。 SNS Ruby on Railsには、ログイン機能など、SNSに必須の機能を実装するためのGem（ライブラリ、拡張機能のようなもの）が多数あります。 TwitterのようなSNSも、Ruby on Railsで開発できます。実際、初期のTwitterはRuby on Railsで作られていました。 スクレイピング ウェブサイトから表示されている情報を抜き出す技術をウェブスクレイピングと言います。 Gemの一つであるNokogiriを使えば、かんたんにスクレイピングすることができます。 業務システム 業務システムと言っても様々なものがありますが、基本的にはログイン機能や特定のデータの管理が必要になってくるかと思います。 そういった機能は、Ruby on Railsで比較的かんたんに実装できるでしょう。 組み込み開発 Ruby on Railsというフレームワークからは外れますが、実はRubyは組み込み開発でも使うことができます。 ロボットの動作などをプログラミングすることを組み込み開発と言います。組み込み開発では、プログラミングの実行環境のリソースが限られているので、C言語などのより機械語に近い言語を用いることが多いです。 […]

それぞれのプログラミング言語には、フレームワークやライブラリと呼ばれる開発を助けてくれるパッケージがあります。 Rubyでは、ライブラリのことをGemと呼びます。Gemを利用すれば開発スピードを格段に上げていくことができます。 今回は、そんなRubyの主要なライブラリGemについてご紹介していきます。 効率よくウェブ開発をしていきたい方 社内のIT人材が不足している方 Gemについて詳しく知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めばGemにはどのような種類があるのか、どう言ったメリットデメリットがあるのか丸わかりですよ。 Gem（ジェム）とは？ それぞれのプログラミング言語には、フレームワークやライブラリと呼ばれる開発を助けてくれるパッケージがあります。 フレームワークとライブラリの違いは分かりにくいですが、フレームワークは「処理全体の流れ」を提供しており、ライブラリは「特定処理のためのパーツ」を提供しているイメージです。 Rubyでは、ライブラリのことをGem（ジェム、日本語で宝石）と呼び、同じ名前のgemというコマンドを使って管理しています。 ちなみにRuby on Railsは、Rubyのフレームワークであり、Gemではありません。 Gemの探し方と選び方 Gemの探し方は大きく分けて２つあります。 １つは、GitHubから探す方法です。 殆どのGemは、GitHubでソースが公開されています。 インストール方法は、GitHubの各プロジェクトにかかれていることが多いですが、gemコマンドを用いてインストールのが基本です。 もう一つは、RubyGems.orgやBestGems.orgという、Gemをまとめているサイトで調べる方法です。 これらのサイトでは、大半のGemが登録されているため、実装したい機能をキーワードに検索をかけると必要なGemを見つけることができます。 Gemは、誰でも作って公開することができるので、ものによっては脆弱性があります。 たくさんの開発者に使われている人気のGemは、多くの開発者によって実際に使われているため、不人気なGemより安全性が高いと言えるでしょう。 GitHubのスター数が多いものや、BestGems.orgで上位になっているものを選ぶと間違いがないです。 Gemを使うメリット Gemを活用する最大のメリットは、開発速度を上げることができるという点でしょう。 決まりきった機能であったとしても、一から作るとなると、実装とテストに大きな労力がかかってしまいます。 決まりきった機能に関してはGemを使うようにし、独自の機能にフォーカスするほうが効率的な開発に繋がります。 Gemを使うデメリット 一方で、Gemには、リスクも存在します。 １つはセキュリティリスクです。先述したように、Gemは誰でも公開することが可能なので、ものによっては致命的な脆弱性を抱えている可能性もあります。 また、不具合に繋がる可能性もあります。新しく導入したGemが、既存のソースコードと競合してしまった場合、不具合に繋がりかねません。 いずれにしても、Gemを導入する場合は、導入しようとしているGemについてしっかりと理解して導入する必要があります。 主要なGem（ライブラリ） ここからは、人気のGemを紹介します。 Devise ログイン認証機能をかんたんに実装できるGemです。 メールアドレスでの登録だけでなく、FacebookやTwitter、LINEといったSNSのアカウントを用いた会員登録にも対応しています。 SNSにしろECサイトにしろ、ほとんどのウェブアプリにおいてログイン機能は必須の機能です。 新たにウェブアプリを開発する場合、決まりきった処理であるログイン機能の開発より、自社アプリ特有の機能にフォーカスしたほうが生産的ですので、DeviseのようなGemを活用するのは良い選択でしょう。 kaminari ページネーションの実装を手助けしてくれるGemです。 ページネーションとは、ブログなどで画面の下で何ページ目かを示してくれるボタンのことです。 kaminariを使うことで、ページネーションをかんたんに実装できます。 Paperclip Paperclipは、ファイルアップロード機能を実装するGemです。 画像などのアップロード、保存、削除などを実装できます。 Active Admin 管理画面をかんたんに実装できるGemです。 モデル（データベース）を直接操作するための、管理画面を作成できます。 シンプルなものであれば、比較的かんたんに実装できますし、カスタマイズを加えることも可能です。 Faker 大量のダミーデータを作成できるGemです。 ウェブアプリ開発を行っていると、テストのために大量のダミーデータが必要になる場合があります。 […]

Shopifyに限らずですが、ECサイトは24時間どこからでも買い物できるのが強みですが、在庫切れになったとき、通常の店舗よりも機会損失が大きくなってしまいがちです。 そういった場合、予約販売ができると、機会損失を減らすことができます。 今回は、在庫切れに対応できる予約販売機能についてまとめます。 予約販売とは？ 予約販売（または事前注文）は、発売前の商品の先行販売や在庫切れの際に、予約として注文を受けることができる機能です。 Shopifyでは、外部アプリと連携することで、予約販売機能をつけることができます。 予約販売のメリット 予約販売機能を活用すると、購買意欲の高いユーザーを逃す可能性が減り、売上アップに繋がります。 リアル店舗では、営業時間が決まっているため、在庫がなくなった場合スタッフが柔軟に対応ができますが、24時間無人で動いているECサイトではリアル店舗に比べて柔軟な対応が難しく、機会損失に繋がりかねません そのため、ECサイト運営では、リアル店舗以上に在庫管理が重要になってきます。 しかし、意識していたとしても、急なアクセス増などで予測が外れてしまうことは大いにありえます。 在庫切れのままであれば、せっかくサイトを訪れた購買意欲の高いユーザーも、離脱してしまう可能性が高いです。 一度離脱したユーザーは戻ってこない可能性が高いですし、そもそもユーザーからは、在庫入荷のタイミングがわからないため、商品購入自体を諦めてしまいかねません。 そういった場合に、予約販売機能があれば、ユーザーの気持ちが熱いうちに購入までしてもらうことができます。 また予約販売機能があれば、販売前の商品をPRして、発売前にある程度売上を立てるという戦略もとれるでしょう。 ShopifyでECサイトを運営していくのであれば予約販売機能は、ぜひ導入してほしい機能の一つです。 予約販売導入アプリ3選 次に、実際に予約販売に使える外部アプリをご紹介します。 Pre-Order Now Pre-Order Nowは、在庫切れ時に「カートに追加」ボタンを「予約購入する」に変更できる外部アプリです。 商品ごとに細かな設定ができるのが特徴です。予約割引なども適用できます。 １商品までは無料で使えますが、商品制限をなくすには月額で課金する必要があります。 Shopifyのプランに応じて月額料金が変わります。Pre-Order Nowとして提供するサービスは、ほとんど変わりません。 ベーシックプラン：$19.95（約2190円） スタンダードプラン：$39.95（約4390円） プレミアムプラン：$59.95（約6590円） 予約販売アプリ 予約販売アプリは、日本の開発会社である株式会社ハシゴが開発している外部アプリです。 機能はシンプルで、管理画面から選択した商品の予約販売化やボタン変更を行えます。 開発会社が日本なので、日本語のドキュメントが充実している点、シンプルなので使いやすい点が魅力です。 料金は、一律で月額$19.99（約2190円）です。 7日間の無料期間があるので、気になる場合は一度試してみると良いかと思います。 Globo Pre-Order-Preorder Globo Pre-Order-Preorderは、海外製の予約販売アプリです。 「カートに追加」ボタンを「予約購入する」に変更するという基本機能に加えて、自動で予約販売モードから通常販売モードに切り替える「カウントダウン機能」や予約割引機能、予約時には一部だけの支払いにする「部分支払い機能」など、多彩な機能があるアプリです。 特に部分支払い機能は、他の外部アプリに無い珍しい機能なので、導入したい場合はGlobo Pre-Order-Preorderを検討してみてください。 料金に関しては、最初の５商品に関しては無料で使えます。 無料版では、予約割引や部分支払いの機能は使えません。 有料版は、月額$14.9（約1630円）ですが、現在はコロナ割引ということで月額 $9.90（約1080円）に値下げされています。１年分をまとめて払うと、更に割引があるようです。 Shopify開発ならdehaへ 予約機能は、ECサイトを運営していくにあたって、非常に強力な機能です。 ですが、外部アプリの導入は、ウェブ開発やLiquidの知識など、専門知識がないと難しい領域になってきます。 dehaでは、５年間に渡りベトナムオフショア開発を行ってきました。 Shopifyに関しても開発実績があり、さまざまなカスタマイズに対応可能です。 ベトナムオフショア開発は、国内開発より低コストで、優秀な開発者を登用できるのが特徴ですので、独自性の高いECサイトを開発したい企業様や、Shopify案件を受けたものの開発リソースが足りないITベンダー様は、ぜひ一度dehaにご相談ください。