Blog

ブログ

【eccube2系】マイグレーションツールのPhinx導入したい!

eccube2系を複数人で開発しているときに思うこと。

「3系とか4系みたいにマイグレーション機能があればいいのに!!」

無くてもできるとは思いますが、他メンバーが作ったSQLを自分でいちいち叩くのは面倒。
しかもどのSQL叩いたかどこかにメモしておかないと忘れちゃう…

なんてことありますよね。

それを解消するために今回は2系にマイグレーションツールの「Phinx」を導入したいと思います。

まず、ローカル環境でdocker+eccube2を用意してください。

ここからphinxの導入をしたいと思います。

(1)composerからphinxをインストールする

composer require robmorgan/phinx

しかしエラーが発生。。

Cannot use robmorgan/phinx’s latest version 0.15.2 as it requires php-64bit >=8.1 which is not satisfied by your platform.
Using version ^0.14.0 for robmorgan/phinx
./composer.json has been updated
Running composer update robmorgan/phinx
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

Problem 1
– Root composer.json requires robmorgan/phinx ^0.14.0 -> satisfiable by robmorgan/phinx[0.14.0].
– robmorgan/phinx 0.14.0 requires symfony/console ^3.4|^4.0|^5.0|^6.0 -> found symfony/console[v3.4.0, …, v3.4.47, v4.0.0, …, v4.4.49, v5.0.0, …, v5.4.28, v6.0.0, …, v6.3.4] but the package is fixed to v2.8.52 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.

Use the option –with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.
You can also try re-running composer require with an explicit version constraint, e.g. “composer require robmorgan/phinx:*” to figure out if any version is installable, or “composer require robmorgan/phinx:^2.1” if you know which you need.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.
# php composer require robmorgan/phinx
Could not open input file: composer

ふむふむ。。
phpとバージョンが合わないから使えないよー。
明示的にphinxのバージョンを指定してね的なことを言われました。
なので下記で再実行

composer require robmorgan/phinx:*

ちゃんとインストールされました!

(2)Phinxの設定ファイルを生成するためvendor/bin配下に移動

cd {dataのパス}/vendor/bin
php phinx init

そうすると /var/www/data/vendor/bin/phinx.php(Phinxの設定ファイル)が生成されます。

(3)Phinxの設定ファイルを編集する。

①migrationsを変更→{dataパス}/db/migrations
②seedsを変更→{dataパス}/db/seeds
③developmentもローカル環境に合わせて修正
※data/config/config.phpを参考

paths:
migrations: ①
seeds: ②

environments:
default_migration_table: phinxlog
default_database: development
production:
adapter: mysql
host: localhost
name: production_db
user: root
pass: ”
port: 3306
charset: utf8

development:③
adapter: mysql
host: localhost
name: development_db
user: root
pass: ”
port: 3306
charset: utf8

testing:
adapter: mysql
host: localhost
name: testing_db
user: root
pass: ”
port: 3306
charset: utf8

version_order: creation

(4)ディレクトリを作成する

mkdir {dataパス}/db
mkdir {dataパス}/db/migrations
mkdir {dataパス}/db/seeds

これで構築完了です。

一旦ここで終わりです。

次はマイグレーションファイルを実際に作って実行してみましょう。

【ECCUBE4系】よくある質問 〜支払方法設定〜

今日はECCUBE4系の管理画面の操作で、お客様から1番頂く質問について書いていこうと思います。

1番多い質問。。。それは、支払方法設定について!!!

「管理画面の支払方法設定画面で、支払方法を追加したのですが、フロント側で商品の購入手続き画面に出てこないのですが、不具合でしょうか。。。?」
そうですよね、そう見えますよね。。。

ですが、それは不具合ではないのです!
ECCUBE4系の立派な(?)仕様なのです!

まず、下記スクショがデフォルトの状態の支払方法設定画面ですね。

ここに、新しい支払方法を追加します。

ちゃんと表示で登録できていることが確認できました。ではフロント側の購入手続き画面の支払方法を確認してみましょう!

あれ。。。出てこない。。。

登録したはずの支払方法「後払い」が出てこない。。。

これは。。。不具合!?

いえいえ、不具合ではございません!

配送設定画面というのが、管理画面に存在するのはご存知でしょうか?

はい、「取り扱う支払方法」の項目に、新しく追加した「後払い」が選択できるようになっていますが、設定がされていないことにお気づきでしょうか?

ここで、購入手続き画面をもう1度見てみましょう。

「配送方法」の項目はサンプル業者が選択されていますね。

ですが、サンプル業者の設定では、支払方法に「後払い」が設定されていないのです。

そのため、購入手続き画面でお支払方法に追加した「後払い」が選択できないという事象が起こったのです。

サンプル宅配を選択してみると、「銀行振込」しか出力されていないですね。

これは、管理画面の配送方法設定のサンプル宅配が、「銀行振込」しか設定されていないためです。

このように、配送業者によって支払方法を設定できるため、支払方法設定画面で支払方法の追加を行っただけでは、購入手続き画面の「お支払方法」に出力されないというわけです。

支払方法設定画面は、支払方法の選択肢の設定が行える画面

配送方法設定画面は、配送方法ごとに詳細を設定できるので、支払方法の設定も行える画面

と、覚えておくと良いかもしれません。

なんでこうなるのかな〜?がわかっていないと、意外とハマってしまう支払方法設定の解説でした。

支払方法設定で困っている方のお役に少しでも立てれば幸いです。

消費者に求められる商品。そして選び方・買い方の移り変わりについて。

近年、個人ネットショップの活気さやメッセージ性が目につくことでしょう。
それぞれ独自の考えやメッセージ、世界観やブランド力が表現され、ショップのファンの存在を身近に感じます。
今回なぜこのようなショップが現代求められているのか。私自身はっきりとした結論は出ていないのですが、心に浮かんだことを参考サイトを交えながら考えをめぐらしていきたいと思います。

みなさんも一緒にこの問いについて向き合いながら、お付き合い頂けたらです。

ただ商品を売るだけではない

「なぜその商品を作り、売っているのか」

その理由について、ショップ内で語られているサイトが存在し目にします。

「安いからみんなが手にしているから何となく買う」から「ほんとうに自分が必要なものだけをじっくり考えて厳選して購入する」

そういったメッセージを私自身受け取りました。時代と消費者の購買意識の移り変わりに答えたショップです。ショップ内では、買い手と売り手がまるでコミュニケーションを取っているような空気感に触れることができることでしょう。

 

ファーメンステーション オンラインショップ

茶心  文化をインスパイアするお茶メディア

「茶心」サイトは、運営者を大々的に告知しない手法を取っており、
サイトフッターの部分をよく見てみると、「伊藤園」が運営しているサイトであることが分かります。
コンセプトとして、「伊藤園というブランドで商品を買うのではなく、消費者に本当によい商品を吟味して購入してもらいたい」という運営者の思いにより、このようなブランディングをしているのでしょう。
こういった事例は、他大手企業でも確認することができます。

ZOOM(トンボのブランド)

 

記事については、ついつい読みふけってしまうものもあり、私が実際に取った行動として、

「なぜこの地でこのショップを開くことにしたんだろう」という疑問を持って訪問したサイト
【石徹白洋品店】のコンセプトページ等を興味深く読んだことがあったのです。

そして生産者の日常を語った「いとしろの日々」では、より深く本サイトの成り立ちについて肌で感じることができました。

「石徹白洋品店」サイトは、【パンと日用品の店 わざわざ オンラインストア】で知りました。
https://waza2.com/

元祖、体験の記事発信をし成功した企業とも言えるのではないでしょうか。
代表の平田はる香さんのnoteでもその人気を伺えることも理由です。

その「わざわざ」代表平田はる香さん初の著書。【山の上のパン屋に人が集まるわけ

  • 公共交通機関のない長野の山の上で、年間3万人以上が来店
  • 商品を食事パン2種類だけに
  • 年商3億円

といったキーワードが目を引きます。
ネットショップ含め、しっかりと経営を成功されているのです。
背中を押してもらえたような元気が溢れますね✨✨
平田はる香さん出演のPodcastについても必聴です。わざわざがこの規模に拡大するまでのストーリーを聞くことができます。

Vol.151 職人と経営者の二面性〜地に足をつけたブランドの姿

Vol.152 あえて道化を埋め込むCIのちから〜ブランドの分人性

 

さて「わざわざ」も「石徹白洋品店」もその土地ながらの生活や空気感を感じることができるサイトです。
[そう「わざわざ」という名前は、「わざわざ(長野の山の上まで)来てくださってありがとうございます」という意味を込めて名付けられたそうです。]
記事を読み終えると思わずほっこりしてしまう理由が分かります。と同時に商品を大切に使おうという気持ちも消費者に培われることでしょう。

昨今、問われているファストファッションについて。
ある日たまたま付けたTVで、海外アジアの地で1着あたりの洋服の作成費について、コストを抑えようと日本人が値段交渉しているシーンが流れていました。

こういった背景には必ず、労働問題や環境汚染の問題に関与していることでしょう。今回取り上げたテーマがこの課題の解決の糸口、手助けになるのではないかと思うのと同時に、今求められていることにぴったり重なるかと思いました。

学びと体験を提供する

これらのショップの傾向として、ショップ主催のワークショップを実施していることが特徴として挙げられます。
ワークショップを通じて、そのショップや商品をリアルに体感し、顧客がより理解を深めることができる場。インターネット上では決して得ることができない情報や知識を手にすることができます。

ショップ側にとっては、顧客とコミュニケーションが取れる場にもなりますよね。
一方通行ではなく、顧客からの発信も受け止めることができ双方コミュニケーションが育める場が作られることでしょう。

 

「結わえる」寝かせ玄米炊き方教室
「FOOD&COMPANY Neighbors」薬膳ワークショップ

人気のワークショップはすぐに埋まるほどの盛況のよう。
ほんとうに欲しい商品を購入するためには、必要なステップとなりそうです。またワークショップの体験は、誰かに話したくなり発信を作る機会になりますよね。
(アメリカの調査会社調べによると、ショップ側の発信より顧客からの発信の方が、消費者にとって影響力が高いそうですよ)

「体験を通して商品を選定してほしい」ショップ側のコンセプトにも敵います。

トピックスとして、こういった類のネットショップは、「商品ランキング」を掲載していないことに気づきました。
https://waza2.com/
https://www.chagocoro.jp/shop
https://www.fermenstation.jp/

「商品ランキング」から商品を選ぶのではなく、自らの審美眼で選んでほしいメッセージなのではと私自身感じ取りました。
ネットショップでは定番となる「商品ランキング」。消費者にとって買うきっかけにはなりますが、「ほんとうに良いものだけを購入する」コンセプトからはずれてしまうのかもしれません。ランキングは分かりやすさはありますが、一歩踏み込んで商品を購入してもらいたいという思いを阻害させてしまうコンテンツになるかもしれません。
サイト運営者がしっかりコンセプトに基づいて、「どうしたら顧客に価値ある商品をもたらすことができるか」を思いめぐらせ、コンテンツ作りをしている現れを感じました。

ショップのファンを作る

どのサイトも共通して言えることがSNSの発信を積極的にやっていることです。

つまりは、顧客と1対1で直接メッセージができる環境があるということ。SNSがファン作りや伝播する役割を担っています。統計でも顧客の半数以上が「ショップが質問に回答してくれるとうれしい」「企業が会話に参加してくれるとうれしい」という結果が示しています。SNSは、顧客とのコミュニケーションを大切にしていることを企業メッセージとしても伝えられるプラットフォームでもあります。

SNSがない時代はこのコミュニケーションを取れる選択肢がなく、顧客がダイレクトに企業にメッセージを伝える環境もなかったため、商品の思いや背景を伝える機会も今よりぐっと少なくありました。SNSがなかったらこのようなユーザーとの関係性や、今回テーマとして取り上げたショップのありかたも成り立たなかったことが想像できます。

そのショップのファンになることで、モノを大切にし慈しみほんとうに必要なものを選択していく気持ちが芽生えていくことでしょう。

 

ここでは【中川政七商店】のSNSを紹介したいと思います。Facebook、Twitter、Instagramと頻繁に情報が発信されています。

   
https://www.nakagawa-masashichi.jp/shop/default.aspx

 

Twitterについては、リツイートが積極的に行われ、Instagramでは質問に対して答えるなど、
ユーザーとの相互コミュニケーションを取っていることが確認できました。

これらのショップで共通して言えることは、「商品に関することだけを発信していない」ということ。
例えば「中川政七商店」のSNSでは入社式の様子を発信していました。
ユーザーも一緒に祝い同じ心境になることで、そのショップの一員となったかのような運命共同体のような気持ちになることでしょう。この入社式の発信は、InstagramとTwitterで投稿されていましたが、表現を変え発信していたことが微笑ましく高い信頼を寄せました。

またInstagramのコメント内でユーザー同士が「この商品いいよね」といったコミュニケーションを取っている様子も確認できました。企業が存在しない場でこのような会話が生まれることは、SNSならではです。

「中川政七商店」さんがコメント内で絵文字を使ってあたたかみのあるコメントをしていたことも印象的でした。ユーザーを気にかけている様子が伝わり、信頼関係の築きやロイヤルティーも高まる効果を育成することでしょう。そしてその言葉遣いは、ショップのブランドやスタイルを確立させる要素の1つになります。

統計として、FacebookよりInstagramの方が画像の反応率(いいね、シェア等)が高いそうで、SNSの特徴を活かして、ファン作りの場として積極的に活用すべきことが伺えます。

 

顧客がショップの商品&サービスを把握してから、購入へと至るまで。この一連の過程は半分以上、インターネット上で行われます。つまりは顧客に直接、ショップの情報を伝える機会が多いにあることが言えます。
今回ご紹介したアプローチ方法は、TVや街頭ビジョンのような莫大な広告費をかけることなく実施できることですので、どのショップにもいつでも等しく実施できるチャンスがあります。そうすることで、このブログのように第3者が情報を発信する効果もありますので、やらない選択肢はありません✨顧客にとって価値ある商品を届けるために、サイト運営者はSNSも活用し情報発信を日課として続けて頂けたらです。

私はあるショップのInstagramをフォローしていますが、そのショップでは頻繁に情報発信が行われるため、情報を受け取ることが日常化しています。そしてそのショップの存在を身近に感じざるを得ません。

 

自分が必要としているモノを必要な分だけ、必要な時に。1つのモノを大切に愛用していく。生活に日常に自然になじみ、供に歩める商品と一緒に過ごす。

これらのショップがこの思いを叶えてくれる情報を届け、私達に問います。

 

さて本ブログ記事は、明確な答えを持たないままみなさんと一緒に考えていくことを目的に書き綴りましたので、そろそろこの辺りでクローズしたいと思います!お耳に入れていただきましてありがとうございました?

達成会・開催のご報告!!

社として2022年の営業利益を大幅に達成することができたため、Link松戸店を貸し切り、

3/24(金)に達成会を行いました✨✨

普段はリモートで顔を合わせないメンバーもいるため、ジョーレンメンバーが一堂に会することはとても貴重&心あたたまる場となりました。

私もこの機会にたくさんのメンバーと話すことができ、話足りないメンバーもいるくらいで胸がいっぱいとなった時間でした。

 

さて会場ではまず始めに、月末に「全社MTG」と題して通常はオンラインでやっている会社からの業務に関する発表について。今回は対面でのみ、Link松戸店の会場でプロジェクトを使い開催しました。

この日のアジェンダを特別公開!!

今回は達成会ということもあり議題が多くありましたが、いつもはこれよりミニマムな内容で行っていることが多いです。

他の議題例として、エンジニアからエンジニアに向けて課題が出される月もあり、メンバーもひやひや!?

翌月の全体MTGで課題について答え合わせをする流れになります。

 

また発表している最中、メンバーの反応がつぶさに感じられリモートにはない活気さがありました。

ひさびさ多くの社員を前に話す「副社長(盛田)&社長(中村)」は、「緊張する」発言が何度かあり、緊張を隠せなかったようです。声がいつもよりワントーン高かったのはその影響でしょうか?

 

アジェンダ最後は、待ちに待った「乾杯」です!

Link松戸店のバーカウンターに、弊社メンバーによる長蛇の列ができ、各々が好きなドリンクをオーダーし、自席に。

そしてドリンクを手にしたメンバーを前に社長の長い話も加わり!?ビールを頼んだメンバーのグラスの泡は、みるみるとなくなっていきました。「早く飲みたい!」という声が聞こえそう 笑。

その後、みんなで乾杯したドリンクはやっぱり最高で格別!お互いのグラスをコツンと響かせ、お互いの労をねぎらいました。

 

食事と共に歓談タイムを挟んだ後は、お待ちかねの全社員対抗のダーツ大会!

「第1回Joolen杯争奪ダーツ対抗戦!」と題して、全10チームに分かれて、対戦しました。

優勝チームに授与される賞品は、社長と高級焼き肉会!!!

 

ダーツを初めてやるメンバーや、腕利きのメンバーも

一度練習タイムを設けてから、トーナメント戦によりダーツ大会は幕を開けました。

ゲーム方式は、得点を加算していくカウントアップ。 1ラウンド各自3本ずつダーツを投げていき競い合いました。チーム内外でお互いを応援し合い励まし合い、一番白熱した時間です。

 

さて決勝に進んだ2チームは、

【Wさん&Sさん&Uさん:チーム】VS 【社長(中村)&副社長(盛田):チーム】

あれ?もし「社長(中村)&副社長(盛田)」が優勝したら、賞品はどうなるんだ!?笑

そんな疑問も持ちつつ、ゲームのスタートを切ったら、みんな優勝に向けて真剣勝負で闘志に火がつきます?

ゲーム中、副社長(盛田)のダーツがボードに刺さらず床に落ちるアクシデントも!?

社員を気遣っての忖度との声もあがっていました 笑。

 

接戦の末、優勝を手にしたのは【Wさん&Sさん&Uさんチーム】???

強かったーーー。

私たちのチームと対戦した時は、あまりにも強敵でWさんに眼鏡を取ってもらって戦ったくらいですから(笑

優勝記念にボードの前で写真撮影をさせてもらいました。みんないい笑顔!

「Wさん&Sさん&Uさんチーム」おめでとうございます!!!!!

 

そのあとはフリータイムを迎え、ビリヤードや卓球を楽しむメンバーや引き続き話に花を咲かせるメンバーも。

フリータイムは途中退場もOKになっていましたが、ほぼ全員退出することなく達成会の場を楽しんでいました。

(その後、二次会に行くメンバーもいたくらいですから★)

 

会のクロージングとして、最後は社長音頭のもとみんなで一本締めをし、お互いを称え合い達成会を締めました。

2023年の目標額も継続して達成し、またみんなで集まることができますように。

 

「CUSTOMIZE EXPERT&CREATIVE EXPERT」ダブル受賞!!|BRAVO MUSIC オンラインストア

去る2022年5月30日に、BRAVO MUSIC オンラインストアをEC-CUBEで構築しリリースいたしました。

本サイトはEC-CUBE社から、「CUSTOMIZE EXPERT」&「CREATIVE EXPERT」を授与されております。

ダブルで受賞した実績は、弊社初です!!!(パチパチパチ???)

エンジニアチーム&デザインチームの汗と涙の結晶となった案件です?

https://bravomusic.jp/

 

 

さて本リニューアルでは、以下EC-CUBE2系の2サイトを1サイトに統合し、リニューアルすることになりました。

 

このような多くの情報を整理し、まとめ上げたのは私自身初めての試みでした。

「こんなに多い情報どうする〜〜」と嘆きの声が私一瞬ありましたが、とてもやりがいがありハートが熱くなるお仕事となりました★

情報整理に精を出す

全て洗い出して情報整理!

本プロジェクトの趣旨。2サイト(「fitness musicサイト」と「yoga musicサイト」)を1サイトに統合するミッション!

2サイトある上、両サイトとも、とても情報が多いサイトであり、また整理されていないコンテンツもある状態でした。そのためまずやったこと!2サイト分のページを全て洗い出す作業を実施!!

Excelに全ページ、リストアップし、その後ブラボーグループ様にリプレイス先では必要なページかどうかをご判断頂きました。その上でWFを作成し、優先順位が高いものは、グルーピングやカテゴリとして位置づけし情報整理に努めました。

カテゴリ名や配置場所について熟考を重ね、ブラボーグループ様と対話しながら現在の内容で確定。

そして優先順位が低いものは、「フィットネス関連コンテンツ」&「ヨガ関連コンテンツ」としてスライドバナーエリアを設け集約することにしました。

ジャンル分けしきれないものや、コンテンツとして優先度が低いものはここにまとめ、情報整理することに努めたのです。(2023.02現在では、この部分はクローズさせています)

「お知らせ」については下の方に配置することにしたため、重要なトピックはファーストビューとなるメインビジュアル下で訴求エリアを確保。バナー点数を際限なく設置できるよう、スライドバナーを展開する見せ方でご提案いたしました。

これなら「お知らせ」エリアが下に配置されていても、しっかりと重要なトピックスをユーザーにお知らせすることができます!

 

さて1つトピックスをお話します。

ジャケ写下にある「視聴する」ボタン。きっと思うことがあるでしょう!

ボトムをそろえたい!!!!!(みんなの声が聞こえる〜〜)

一度ボトムをそろえたことがあるのですが、不自然に間のあいた空白が出きてしまい、そろえることをやめました。全て同じ文字数なら、きれいにレイアウトがまとまるでしょうが、動的部分になるためその選択肢は取れません。

一方で商品一覧ページでは、「視聴する」ボタンをそろえています。

本ページは整然としたページ内容となるため不自然さがなく、そろえる選択を取りました。ページの見せ方によって臨機応変にですね!

https://bravomusic.jp/products/list?product_type_id=1

メニューの見せ方はシンプルに!

今回譲れない点がありました。それは、ヘッダー周りのメニュー導線をシンプルに使い勝手よい導線とすること。ログイン時も気を配りこの点妥協せず、担当デザイナーと協議しました。

加えて「著作権について」アテンションをかけたいこと、ブラボーグループ様から要望を受けたため、ヘッダー周りが煩雑にならないよう、目に付きやすい赤ベタで配色。今回追求したシンプルさを叶えるため、スクロール時の追従からは外すことにしました。追従なしでもファーストビューに配置することで目的を達成できていたことも理由です。

ドロップダウンメニューも活用し、その中で多くのメニューを展開し整理することにしました。

検索も検索窓をトップページに表示せず、ドロップダウンメニュー内に展開することでコンパクトに見せる効果を発揮しています。

と同時にスマホのハンバーガーメニューについてもシンプルな設計にこだわりました。

全てメニューを表示すると縦にとても長くなり、ユーザーにとって使い勝手の悪いものになってしまいます。そのため、クリックしたら下位のメニューが展開する見せ方でブラボーグループ様からも了承いただくことができました。

(ブラボーグループ様もこの部分の見せ方について気にされており、解消できてよかったです!)

 

 

 

ここでときおり話題になるトピックを!ページトップについて。

スクロール時に追従させているサイトもありますが、「そこまで必要?」と思うことがあります。スマホだと特に、操作性も落としてしまう導線だと考えています。実際この「ページトップ」導線を使っているユーザーも少ないことでしょう。

iPhoneだとステータスバーをタップし、この動作を取るユーザーも多くいること想像しますよね。現在、「ページトップ」の導線がないサイトも存在しているくらいです。

そのため「ページトップ」は、フッターのデザインアクセント程度の役割とみなしてよいと考えています!実はこの「ページトップ」デザイン、メインビジュアルでもアクセント処理として扱われていることがあります。矢印の向きは ⬇ です。ぜひ他サイトでこの処理を探してみてください★

タブをフル活用!

今回タブが、情報整理に貢献しています。

 

そこでも一番複雑なタブ構成が「オススメ楽曲ベスト3」!

情報整理の仕方について一番悩んだコンテンツでもあります。スマホではプルダウンで選択する形式を取り、使いやすいUI設計を目指しました。

ただ!この設計はバックエンド側の処理工数について検討する必要がありました。今回はエンジニアと相談しこの設計を実現することができました★

こういった時の事前の対策として、WFの時点で&デザインが仕上がったタイミングでエンジニアに問題がないか前もって確認を取りながら進めるようにしています。

デザインはトレンド感を取り入れる

デザインリニューアルするからには、トレンド感を取り入れたい。デザイン制作に携わる者にとっては、ごく自然な考えです。それでは本サイトで取り入れたトレンドについてピックアップし、ご紹介します。

▼背面全面に写真を配置し、レイヤー構造を採用

その上をコンテンツがスクロールしていくことで、スクロール時に奥行きが加わり、スケール感ある迫力あるイメージを効果として与えています。

▼ブロック単位で横に流れる文字

デザインのアクセントになるだけでなく、リッチ感も演出してくれます。英字は配置するだけで華やかさが加わり、装飾として多用されています。

(この英字の装飾方法は使いやすくもあるので、安易に使うことなく上手に取り入れたいところです!)

この2つのデザイン処理について、デザインギャラリーサイトを見ていると同じような表現をしているサイトをいくつか見かけるかと思います。実はデザインって、基本パターン化して作られているのです。

似通ったサイトに見えないよう処理を組み合わせて、オリジナルのエッセンス等を取り入れデザインしていることが分かります。じゃあ誰でもトレンド感あるデザインが作れるんじゃないかって??

それは一朝一夕ではできません。が回答です★

余白感や細部のディティール、フォントについてもベストを尽くして完成させているためです。心地よいデザインにたどり着くまで何度も試行錯誤を重ねます。

ディレクターである私もラフデザインを作ることがあり、身を持って知りました〜〜!機会があったらみなさんもデザイン制作にチャレンジしてみてください♪

チームメンバー一丸で作ったサイト!

最後に本サイトの制作メンバーについて触れさせてください♪

本サイトはチームメンバー一丸となって作り上げ、思い出深いサイトとなりました。制作中はお互い遠慮することなく必要あらばみんなで集まって、すり合わせや進捗確認を行いました。リモートメンバーが多いため、そんな時はSlackのハドル機能を使って柔軟に集まります!

チームワークって大切!!

リリース日はみんなでオフィスに一同に集まり、追い込みました。オフィスにいた他メンバーも気にかけてくれて、応援してくれたりその場を和ませてくれたり?

22時前にオフィスに届いた出前(ビルの表の入り口が閉まっていて、出前のお兄さんが辿り付けず!予定より配達時間が遅くなってしまったのです 笑)をみんなで囲んだことは今でも良い思い出です。←ちなみにレアなことです。めったにありません!!22時はオフィスに誰もいないことが基本である弊社。

リリースできた時はみんな感極まり、喜びの声が上がりました!感動!!!私も嬉しかったー。ついに我が子が世にリリースされた気持ちです✨✨

今現在もブラボーグループ様がこまめに更新して下さり、サイトを育てている様子を見るととても嬉しく思います。

 

株式会社ジョーレンは「EC-CUBEインテグレートパートナー」ページで、プラチナランク企業として掲載されています。他EC-CUBE構築実績も掲載していますので、ぜひご覧ください!

https://www.ec-cube.net/integrate/partner/

https://www.ec-cube.net/integrate/partner/partner.php?partner_id=1431

Shopify多言語対応。「ゆとり屋」オンラインストアをリリース!

Tシャツやステッカー等、ゆとり屋様オリジナルグッズを販売するサイト。

ゆとり屋ONLINE STOREを2023年1月24日にリリースいたしました。弊社オリジナルデザインで、Shopifyにて構築しております。

https://onlineshop.yutoriya.shop/

  

 

鳥の種類から選ぶ」ページは弊社メンバー間でも人気のページ★

細かな描き分けをしているゆとり屋様のイラストは、思わず見入ってしまいます。

本サイトならではの魅力あるコンテンツです。

ゆとり屋様のInstagramでも本サイトへの導線が貼られ、商品のご案内をしていますので、合わせてチェックしてみてくださいね。

 

さて本ブログでは、本サイトの制作に関することについて 3つ!ご紹介したいと思います。

構成について変化にこだわる

デザインはリズム感が大事です。

リズム感って?

同じ拍子のリズムが継続して刻まれていると、単調となりリスナーにとってあきあきしてしまいますよね。

早いリズムだったり、ゆっくりなリズムだったり変化あるリズムを刻むことで、あきなくリスナーは聴けるのです。

サイトの見せ方も同じで単調な構成が続かないよう、リズム感ある構成で組んでいます。

本サイトの場合、以下構成を例にあげましょう。

・ランキング

 「もっと見る」の導線

・ゆとり屋が選ぶおすすめ

  「スライド」の展開

ゆとり屋様に提案し、この構成で設計することを確定。違いも出て、ユーザーにとっても分かりやすい効果が出ました。もちろん配色等でも違いを出しています。

またこの2つのコンテンツは、更新頻度が多いため上部に配置しています。より見せ方の差別化が重要になりますね。

スマホファーストを意識する

PCのメインメニュー(「Tシャツ、パーカー・トレーナー」等が並んでいるメニュー)は、

メニュー間の余白が狭いため少し窮屈に感じ、可読性・視認性が下がっているかもしれません。

ゆとり屋様と相談し、「メニューの文字数を短くする」or「メニュー数を減らす」ことも検討しましたが、ECサイトは特にスマホからの閲覧数が多いため、PCサイトのメインメニューはこの見え方でよしとしました。

それより、メニュー名&メニューの数を優先することを選択したのです。

近頃、「(PCデザインより)スマホデザインを先に確認したい」といったクライアント様の声が多くなりました。

至極当たり前のことではありますが、ますますスマホデザインの重要性は高くなること感じています。

デザイナーは、スマホからもデザイン作れるようにしておくといいですね!

心理学的法則を活用

ミラーの法則

サイト制作中にゆとり屋様から相談を受けました。

「【鳥の種類から選ぶ】のサブメニュー。たくさんメニューを設けてもいいと思いますか?」

この問いを受けた時に、私の頭の中でよぎったこと。

———————————

マジカルナンバー7

———————————

制作に携わるみなさんなら、一度は聞いたことがあることでしょう。

マジカルナンバー7とは。

【ナビゲーションの項目数は、7つ以下に制限しなければならない】

私もこの数字を意識して、10年以上今までサイト制作を行って来ました。

そしてクライアント様にもこの説明をしたことがあります。

と同時に著書「UXデザインの法則」にて、ミラーの法則として以下説明書きがあったことを思い出しました。

———————————————————————————————————————————————————————

ナビゲーションメニューのようなデザインパターンは、選択肢が常に目に見えていてユーザーが項目を覚える必要がないので、これらのリンク数を制限してもユーザービリティ上のメリットはない。メニューが効果的に設計されている限り、ユーザーは自分の目的さえ覚えておけば目当てのリンクを素早く識別できる。

———————————————————————————————————————————————————————

ゆとり屋さんサイトに訪れるユーザーは鳥好きが多くいるため、

「この鳥グッズを見たい!」という具体的な目的を持ってサイトを訪問することが予想されます。

そのため、メニュー数が多くても問題ないこと私はこの著書の裏付けにより回答をしました。

また多くの鳥の種類のグッズを取り揃えていることは、本サイトならではの優位性でもあります。

数多く見せるほど注目してもらえ、本サイトの最大の魅力にもつながるのです。

この続きの詳しい説明は、著書「UXデザインの法則」に書いてあるので、興味のある方は読んでみてくださいね。

さてその他2点、このサイトでも共通して語れることがこの著書に書いてありましたので、合わせて紹介させてください。

ヤコブの法則

ユーザビリティの専門家ヤコブ・ニールセンによって2000年に提唱。

———————————————————————————————————————————————————————

・ユーザーは他のウェブサイトでの経験の積み重ねを通じて「デザインはこうあるべき」という期待を築き上げる傾向がある

・ありふれた慣例に従ったデザインにすることで、ユーザーがサイトの中身やメッセージ、扱う商品にもっと集中できるようにすべき

———————————————————————————————————————————————————————

というものです。

本サイトでいくつかピックアップして例を挙げると以下になります。

1)サイトロゴ

2)ヘッダー右上にあるカート等のボタン

3)数量のセレクトボタン

4)カートに追加するボタン

5)フッターにある規約関係のページ、SNSの導線

どのサイトでも基本共通して本サイトのような配置、挙動をしているでしょう。

これはメンタルモデルという心理学の概念です。(詳しくは著書「UXデザインの法則」を参照)

この法則を意識した設計にすることで、ユーザーは快適に目標達成に集中できるため、本サイトでも基本事項として取り入れています。

美的ユーザビリティ効果

———————————————————————————————

見た目が美しいデザインはより使いやすいと感じられる。

———————————————————————————————

見た目の美しさは、ユーザビリティがUPすると研究結果により証明されています。

コストが捻出できないため、見た目は二の次。

とプロジェクトにより判断されることがありますが(とても悲しい事実(T_T))、この実証結果により今一度見直すべきかもしれません。

この著書で他注目した事例として、

・見た目が美しい携帯電話

・見た目が美しくない携帯電話

でユーザビリティテストをしたところ、

【ユーザビリティを高く評価しただけではなく、携帯電話の見た目によってパフォーマンスにもプラス効果があり、タスクの完了時間が短縮された】

という結果が出たそうです。

リリース後、本サイトを紹介したところみんなから「かわいい!」というコメントを寄せてくださいました。

それはユーザビリティだけではなく、パフォーマンスにも良い影響を与えること示唆してくれています。

「見た目が美しいデザインはユーザーにポジティブな反応を引き出し、デザインが信頼性を高めてくれる。」

ともこの著書で伝えていました。ユーザー体験が重要視されている昨今、深く同意することです。

成果を出すなら、デザインまでしっかり力を注ぎ実施すべきであることメッセージとして受け取れるでしょう。

まずは見た目を美しくしてからではないと、ユーザビリティテストも効果を発揮しない事実。

デザインの価値が重要であることこの著書が教えてくれました!

 

株式会社ジョーレンではShopifyやEC-CUBEの構築はじめ、デザインについてもお引き受けしております。

さまざまな課題を抱えている方、ご相談からでも構いませんのでお問い合わせください。

各専門スタッフがクライアント様と伴走し、制作を行わせて頂きます。

コンセプトにぎりが超重要!デザイン制作の裏側をご紹介

株式会社ジョーレンはシステム開発はじめ、デザインの制作についても承っております。

今回はデザインの制作についてフォーカスし、制作の際、大事にしていることをご紹介します!

・ジョーレンのデザイン実績 一例

デザインはコンセプトの認識合わせが超重要

超重要  と書きました。

はい、デザインの制作において最初から最後まで1mmもこぼすことなく一貫して超重要なのです。

何がそんなに超重要なのか。その根拠について今回は綴っていきます!

ヒアリングで大切にしていること

まず始めにクライアント様にヒアリング。ヒアリングする内容は、オリジナルのヒアリングシートのフォーマットが存在し、

これを元にクライアント様の傾向に合わせてカスタマイズしてヒアリングを行っていきます。

制作者にとって少しでも多く情報があることは、アイディアのヒントになり良き制作につながるため、聞けることはなるべくヒアリングするようにしています。

ちなみに雑談内容も制作者にとってはヒントになるのです!雑談って大事。

またクライアント様の雰囲気やオーラを生で感じ取るため、対面でヒアリングを行うこともあります。体感で得られることもあるのです!対面でのヒアリングだったら、その様子を写真撮影しその後デザイナーに共有することも臨場感が伝えられてよいですね。

ヒアリングした内容で疑問に思ったことはそのままにせず必ず解消させ、疑問が残らないようにします。

そしてこのヒアリング内容はコンセプトへと繋がります。

ベースカラーどうする?

さてここでは、ヒアリング項目の中から1つピックアップしてご紹介しましょう。

ヒアリング時に欠かせない「ベースカラー」の取り決めについて。

成果物の印象を左右するものになりますから、クライアント様の気持ちも気合もぐぐっと入る質問内容です。

カラーを決める時に役立つツールがこちら!

感性マッピングツールなるものがあり、

日本カラーデザイン研究所」が研究・開発した配色イメージスケールが活用できます。

http://www.ncd-ri.co.jp/image_system/imagescale.html

シンプルな例でたとえると、

  • 「クールなイメージにしたい!」だったら  青系
  • 「情熱的なイメージにしたい!」だったら  赤系

といったように色を決めていきます。

クライアント様がベースカラーを決めること迷っていたら、すかさずこの配色イメージスケールを用いて取り決めるとよいでしょう?

もし仮にクライアント様から「クールなイメージにしたい!」という希望があるのにも関わらず、

赤系のベースカラーを指定した際には、この資料を元に説明しましょう。説得力が増します!

サイトの骨子となるWFの作成

次にヒアリング内容を踏まえて、WF(ワイヤーフレーム)を作成します。

※WF(ワイヤーフレーム)とは:サイトに掲載する要素を整理し、サイトに見立てレイアウト化したドキュメントのこと

・以下はEC-CUBE社提供のWFサンプル

 

WFを作る時に心がけていることはこちら!

  1. コンセプト(ヒアリングシート)を踏まえた内容か?
  2. グルーピング等して、情報整理が的確にできているか?  
  3. プライオリティを意識した見せ方になっているか?
  4. なぜこの配置にしているか、裏付けが語れるか?
  5. SNS等、必要な外部リンクは漏れなく設置できているか?

 

ここで超重要で触れた「コンセプト(ヒアリングシート)を踏まえた内容か?」が出て来ました。

WFの作成者がコンセプトからブレたものを作成してはいけません。目指す方向を見誤ってはいけません。しっかり振り返りつつWFの作成を行いましょう。

デザインはあくまで手段に過ぎないため、達成したい目的(コンセプト)を正しく伝えられるようWF作りを行いましょう。

余談:

私はまず始めに手書きでWF作りを始めます。その方が思考のスピードが早く、アイディアもまとまりやすいためです。ツールからだとツールベースについつい設計が走ってしまいがちなのです。

実際、手書きから作成する人が多いようです!

 

用意するWFは、

  • ハンバーガーメニュー
  • スマホとPC  両ページ

を欠かさず用意しましょう。1つでも欠けるとデザイナーが迷ったり制作負荷がかかることがあるためです。クライアント様とすれ違いや、デザインにおいて出戻りが発生することもありますので、怠らず作成を行います。

またポイントとして、デザインに近いWFになるよう、写真画像等を反映したカラフルなWFを作ります。(私のポジションとして、ディレクターの立場で依頼しています)

なぜかというと、以下2つの思いがあるからです!

1)クライアント様ご希望のデザインに近いイメージでWFを確認してもらえるため

2)デザイナーにこのWFを超える最高のデザインを作ってほしいため

そしてクライアント様から了承取った上、

レイアウトはいじってよい前提でデザイナーに依頼します。

デザイン依頼。目指している山の頂上は同じか!?

ヒアリングシートを元にコンセプトを整理して、デザイナーにデザインを依頼するステータスを向かえました。

心がけている点は、クライアント様から受けた内容プラスアルファ、デザインの際に参考となりそうな情報をデザイナーに伝えることです。

それを受けてデザイナーから発信されるアイディアは

「ああ、こう来たか!」「なるほど、こういった表現もできるか」「わーそこまで熟考できていなかった」

と多くの気づきを得ることがあります。またデザイナーからこういった指摘を受けることは、次に活かす学びにも繋がります。

その後デザイナーからデザインがUPされた時、UIが更に磨きがかかって仕上がっていた時は感動です。

見やすさや情報整理具合が、レベルアップ!!

デザイナーの存在に頼もしさ(後光が見えるっっ)を感じる瞬間でもあります。

そしてこの時、必ずコンセプトからブレていないかチェックを行うことは欠かせません。

なぜって。

みんなで目指す山の頂上は同じだから!

です。

※この言葉、この後でも出てきます。

クライアントプレビューそしてFIX。ここで武器となるのは!?

デザインが仕上がったら、コンセプトを添えてクライアント様にプレビューを行います。

そしてデザインを見たクライアント様からフィードバックが届くステータスを向かえました。

届いたフィードバックを確認してみたら、

時には1からデザインを修正しなければならないフィードバックが届くことがあります(ガクブル。

しかし!こちらには強力な武器があります!!

エビデンスとして用いる武器、コンセプトの元となるヒアリングシート!!!

コンセプトからブレているフィードバックを受け取ったら、

必ずクライアント様とコンセプトに立ち戻って一緒に確認を行いましょう。

そこでコンセプトからズレているフィードバックをしていること、クライアント様が気づきます。

みんなで目指す山の頂上は同じだから!

そうです。

クライアント様は違う山の頂上を目指してしまっていたのです。

それゆえコンセプトと異なるフィードバックをしてしまったのです。

冒頭で超重要と書いた理由はここにありました。

コンセプトを握らずデザインすることは、目指す方向を共有せず山を登ってしまうことを表します。

想像してみただけで、恐怖ですね。

トラブルを招くだけで、クライアント様はじめチームメンバーも安心して一緒に山の頂上を目指すことができません。

認識合わせって超重要ですね?

さて今回はデザインを行うに当たって制作の裏側のお話をさせて頂きました。

株式会社ジョーレンはShopify構築、EC-CUBE構築案件においてもデザインから制作を承っておりますのでお気軽にご相談ください。具体的なデザインイメージがなくてもお客様と伴走してご提案することが可能です。

 

▼EC-CUBEの実績はこちら

https://www.ec-cube.net/product/cases/backnumber.php?search_partner_id=1431

 

バナー

LINQ の基本を理解しよう

LINQ とは

LINQ とは コレクション・XML・SQLなど様々なデータソースに対する検索・操作を行うもので、System.Linq を参照することにより提供される拡張メソッド群(標準クエリ演算子)ことを指します。
本稿では特に利用する機会の多いコレクション(IEnumeable)に対する LINQ to Object の解説を行います。

メソッド構文とクエリ構文

LINQ は拡張メソッドで提供されることから、当然コレクションのメソッドとして利用する(メソッド構文)ことが可能です。
また一部の標準クエリ演算子に対しては言語仕様としてキーワードが割り当てられており、それを用いることでSQLライクに記述する(クエリ構文)ことも可能です。

例)メソッド構文とクエリ構文
 ※本稿のサンプルコードではメソッドの引数としてラムダ式を使用します。

var source = new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9 };

// いずれも結果で得られるコレクションの型はIEnumerable<int>となり、
// 列挙することで { 1, 2, 3, 4, 5 } の結果(要素)を得ることができます。

// メソッド構文
// 処理しない値を取り出す場合はSelectを書略可能
var methodResult = source.Where(x => x <= 5);

// クエリ構文
// クエリ構文ではselectを省略不可
var queryResult =
    from x in source
    where x <= 5
    select x;

またクエリ構文で記述したコードはコンパイルを通して標準クエリ演算子に変換されますので、最終的に得られる結果は同一になります。
前述のコードから得られる実行形式のファイルを逆コンパイルした結果は下記となります。

// Program
using System.Collections.Generic;
using System.Linq;

private static void <Main>$(string[] args)
{
	int[] source = new int[9] { 1, 2, 3, 4, 5, 6, 7, 8, 9 };
	IEnumerable<int> methodResult = source.Where((int x) => x <= 5);
	IEnumerable<int> queryResult = source.Where((int x) => x <= 5);
}

なお全ての標準クエリ演算子をクエリ構文で記述することはできないため、それらの機能が必要な場合はメソッド構文で記述する必要があります。
※メソッド構文とクエリ構文を混ぜて使用することも可能ですが、式を分けるかどちらかに統一したほうが可読性の面からも無難です。

基本的な使い方

Where によるデータの抽出と Select によるデータの選択・処理

Where メソッドでは、コレクションから条件に合致する要素を抽出することが可能です。
Select メソッドでは、コレクションの全要素に対して処理を行った結果を取得することができます。
Where メソッドと Select メソッドを組み合わせてコレクションの条件に合致した要素に処理を行った結果を取得する、といった用途で利用することが多いようです。
ここでは、数値のコレクションから条件に合致する要素を抽出し二乗したコレクションを取得する例を示します。

var source = new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9 };

// メソッド構文
var methodResult = source.Where(x => x <= 5).Select(x => x * x);

// クエリ構文
var queryResult =
    from x in source
    where x <= 5
    select x * x;

// 結果は { 1, 4, 9, 16, 25 } となる。

また、数値型のコレクションで利用する以外にも、オブジェクトのコレクションに対して処理を行うことも可能です。
例えば人物を定義するPersonクラスのコレクションから20歳以上の人を抽出して氏名をつなげた文字列を取得するといった処理の場合、下記のように書くことができます。
※本稿のサンプルコードではnullチェック等を行っていませんが、実際に利用する場合は例外が発生しないように条件式に気を付けましょう。

/// <summary>
/// 人物を定義するPersonクラス
/// </summary>
class Person
{
    /// <summary>名</summary>
    public string FirstName { get; set; }
    /// <summary>姓</summary>
    public string LastName { get; set; }
    /// <summary>年齢</summary>
    public int Age { get; set; }

    public Person(string firstName, string lastName, int age)
    {
        FirstName = firstName;
        LastName = lastName;
        Age = age;
    }
}

/// <summary>
/// サンプルクラス
/// </summary>
class Sample
{
    static void Main()
    {
        var persons = new[] {
            new Person("Terrance", "Huff", 18),
            new Person("Deven", "Cyrus", 26),
            new Person("Dave", "Corbett", 53),
            new Person("Brion", "Shoebridge", 12),
            new Person("Terence", "Long", 31)
        };

        // メソッド構文
        var methodResult = persons.Where(x => x.Age >= 20).Select(x => $"{x.FirstName} {x.LastName}");

        // クエリ構文
        var queryResult =
            from x in persons
            where x.Age >= 20
            select $"{x.FirstName} {x.LastName}";

        // 結果は { "Deven Cyrus", "Dave Corbett", "Terence Long" } となる。
    }
}

GroupBy によるデータの組み分け

GroupBy メソッドでは、コレクションの要素から取得した値をもとにグルーピングを行い、グループごとにデータを抽出することが可能です。
下記のサンプルコードでは、前述のPersonクラスのコレクションを元にFirstNameの頭文字でグルーピングを行っています。

// メソッド構文
var methodResult = persons.GroupBy(x => x.FirstName[0], x => $"{x.FirstName} {x.LastName}");

// クエリ構文
var queryResult =
    from x in persons
    group $"{x.FirstName} {x.LastName}" by x.FirstName[0];

// 結果は、下記となる。
// Key 'T'
//   { "Terrance Huff", "Terence Long" }
// Key 'D'
//   { "Deven Cyrus", "Dave Corbett" }
// Key 'B'
//   { "Brion Shoebridge" }

OrderBy / OrderByDescending による並び替え

OrderBy メソッドは昇順、OrderByDescending メソッドは降順で、コレクションの要素の並び替えを行います。
クエリ構文の場合は orderby 句と ascending 句または descending 句の組み合わせで並び替える順序を指定します。
数値を降順で並び替える場合は、下記のようなコードになります。

var source = new int[] { 3, 5, 7, 1, 10, 8, 4, 6, 2, 9 };

// メソッド構文
var methodResult = source.OrderByDescending(x => x);

// クエリ構文
var queryResult =
    from x in source
    orderby x descending
    select x;

// 結果は { 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 } となる。

最後に

今回は割と利用頻度が高いと思われるメソッドを簡単に説明しましたが、これらを組み合わせることで複雑なデータの抽出処理を可読性を上げつつ簡単に記述することができます。
ただし LINQ は気軽に使える反面、書き方によっては非常に大量のメモリを使うことがあるため、Web アプリケーションのように複数スレッドで同時実行されるようなプログラムで大量のデータを扱う場合は、問題がないか十分気を付ける必要があります。
適切な場所でうまく活用できるようにしましょう。

.NET コーディングのTips2選

初めに

ここ最近携わった案件でいくつか気になるコードを見かけましたので、多少なりとも改善できればとTips的なものを2つまとめてみました。
非常に初歩的な内容のため、今更言われなくても知ってるよ!という方はスルー推奨、初めて聞いた方は今後の参考にしていただければと思います。

foreachステートメント直前の要素数チェック

foreach の直前で要素数の判定を行っているコードを見かけますが、要素数が 0 の場合は何もせずブロックを抜けるため、要素の有無で処理分けが必要なければ判定は不要です。

例1:直前のif文で抜けるパターン

// このif文のブロックは不要
if (elements.Count == 0)
{
    return;
}
foreach (var element in elements)
{
    // 処理本体
}
return;

例2:if分のブロックとして処理するパターン

// このif文の判定は不要
if (elements.Count > 0)
{
    foreach (var element in elements)
    {
        // 処理本体
    }
}

いずれの場合も、 `foreach` のみ記述するだけで問題ありません。

foreach (var element in elements)
{
    // 処理本体
}

IEnumerableを実装するコレクションの要素存在チェック

IEnumerable を実装するコレクションに要素が存在するかどうかをチェックする際、 Count メソッドで取得した結果が 0 より大きいかで判定するコードを見かけますが、このメソッドは対象をカウントするために内部で全要素を列挙しているため、パフォーマンスがかなり悪くなります。
明確な要素数で判定する必要がない場合は Any メソッドを使うようにしましょう。

検証

0 から 999999999 までの数値を列挙したコレクションから 1000000 以上の要素が存在するかどうかを、Count と Any それぞれのメソッドで判定した場合の実行時間を比較します。

コード
using System.Diagnostics;

public class Example
{
    delegate bool CheckFunc(IEnumerable<int> list);

    /// <summary>
    /// 判定結果と処理時間を出力
    /// </summary>
    static void WriteResult(string name, CheckFunc func, IEnumerable<int> list)
    {
        Console.Write($"{name} : ");

        // 時間計測開始
        var sw = new Stopwatch();
        sw.Start();

        if (func(list))
        {
            Console.Write("要素が存在します");
        }
        else
        {
            Console.Write("要素が存在しません");
        }

        // 時間計測終了
        sw.Stop();

        Console.WriteLine($" : {sw.ElapsedMilliseconds} ミリ秒");
    }

    /// <summary>
    /// 0から999999999までの整数を列挙
    /// </summary>
    static IEnumerable<int> GetValues()
    {
        for (var i = 0; i < 1000000000; ++i)
        {
            yield return i;
        }
    }

    public static void Main()
    {
        // コレクションを取得
        var array = GetValues();

        // 拡張メソッドを利用して要素を抽出
        // このコードでは1000000以上の値を抽出
        var result = array.Where(x => x >= 1000000);
        // 次のようにクエリ式で書くことも可能(現場によってはNGかも)
        // var result = from x in array where x >= 1000000 select x;

        // 結果に要素が存在するかどうかを判定
        // Anyメソッドの場合
        WriteResult("Any", x => { return x.Any(); }, result);
        // Countメソッドの場合
        WriteResult("Count", x => { return x.Count() > 0; }, result);
    }
}
実行結果
Any : 要素が存在します : 23 ミリ秒
Count : 要素が存在します : 18756 ミリ秒

処理にかかる時間は環境によって変わりますが、同じ判定結果を得るのにかなりの差が出ることを確認できます。

また、抽出した要素を再利用しない場合はメソッドチェーンで簡潔に書くこともできます。

if (array.Where(x => x >= 1000000).Any()) {
    // 処理
}

簡潔にパフォーマンスを考慮したコードを書くように意識したいですね。

次回は

今回出てきた IEnumerable に関連して LINQ の解説やTipsをまとめてみたいと思います。

Shopifyで構築。「DMMLunaサイト」をリリース!

合同会社DMM.com様(以降、DMM様)のご依頼により女性向けに検査キットを販売するサイト、

DMMLunaサイトを2022年10月31日にリリースいたしました。

オリジナルデザインで、Shopifyで構築した案件になります。

https://dmmluna.com/

 

DMMLunaブランドを確立すべく世界観をどう表現するかを熟思

今回DMM様の新たなサービスの試みとして、本サイトを立ち上げることとなりました。

課題として承ったミッションは、DMMLuna独自のブランディングがいかに確立できるかです。

その実現のため、いくつかの試行錯誤を行いデザインに望みました。

扱う商材をどう見せるか!?議論

まず課題に上がったことは商材をどう見せるかについてです。

本サイトで扱う検査キットとは、以下のような商材になります。

この商材写真をいくら飾っても、目指すデザイン感にマッチさせることはできません(;_;)

そしてチームメンバーとディスカッションした末、検査キットの写真は用いず、ターゲットとなる女性写真を主役に、検査項目の数を明示して見せる!

という案で世界観を壊すことなくまとめ上げることができました。

この案に行き着くまで他のアイディアも出ており、例として

「イラスト化する案は?」「商品画像の更新性負荷や、商材の正確な再現性が劣るのでは?」といった理由により見送りになった経緯も背景にあったのです。

・FIXした商材画像が見れるページはこちら!

https://dmmluna.com/collections/kit

 

ロゴへ込めた思い&ストーリー性を持ったキャラクター設定

次にオリジナルの世界観の実現です。

ベンチマークとなるサイトは、そのサイト独自に描き起こしたイラストや撮り下ろしの写真が起用されていました。

本案件ではイラストレーターの起用が予算等の兼ね合いにより厳しく、条件として担当デザイナーができる範囲で制作しなければなりません。

またセンシティブな内容を扱った商材となるため、サイト用の写真撮影も見送る必要がありました。

その制約ある中で、ミッションとしてDMMLuna独自の世界観を表現する必要があったのです。

更にDMM様がベンチマークとなるサイトを大変気に入っていたため、それを凌駕するサイトを作らなければ!!という課題もありました。

そして提案させて頂いた内容は以下になります。

  • DMMLunaが描くストーリー展開

    (メインビジュアルにおいて)

    ・ルナ先生の元に本サイトのターゲットとなる女性をイメージしたイラストを配置。

    ・お家は、自宅で検査することができる。

    ・ポストは、ユーザーが検査した検査キットを郵送する。

    ・傘の子は、安心を届ける。

    といったメッセージを込め構成。

 

  • サイトロゴ

    シンボルの形状から「優しく包む」を表現。

    全体の形はハートを想起させ 「心」「優しさ」「安心」を。

    内側に包む形状はDMMLunaが女性の健康を守り、 優しく包み安心をもたらすという意味をかたどる

 

  • コンセプト

    DMMLunaをきっかけに新しい価値観や新たな生活習慣の場を本サイトを通じてユーザーに与えられるよう、DMMLunaブランドを確立できるようデザイン。

    今までターゲットとなるユーザーが利用していたサイトはなんとなく気持ちがのらない、面倒くさいといったネガティブなイメージを与えていたかもしれません。

    DMMLunaではそういったイメージを変え、DMMLuna独自の世界観を演出した本サイトで一新を目指す。

    ※このコンセプトは、これからの顧客満足度の向上、そして市場シェアの拡大にもつながることも目的といたしました。

 

ご提案した世界観はDMM様に評価いただき、仕上がったデザインを通じてご要望に沿った世界観を作ること結実できたのです。

 

「よくあるご質問」の見せ方を思案する

ここでは制作エピソードのこぼれ話を。

よくあるご質問は一般的に以下のような文字ベースの印象が多いかと思います。

今回DMM様から

「文字文字の印象ではなく、キャッチーで読みやすい見せ方にしたい!」とご要望を受けておりました。

実現に向け、イラストを入れる、URLの文字列をそのまま記載しない等

チームメンバーと工夫はしてみたものの、テキスト原稿のボリュームがある程度あると、実現することは困難なことが分かりました。

(本サイトは制約上、これ以上テキスト原稿の文字数を減らすことはできませんでした)

そして仕上がったページはこちら!

https://dmmluna.com/pages/faq

とはいえ、一般的な「よくあるご質問」ページより読みやすくキャッチーな印象に仕上がっていますよね★

Shopifyで構築することで運用性UPの恩恵を享受

まだまだShopifyを勉強中の私。

今回Shopify構築を通していくつか気づきがありました!

Shopify構築をクライアント様に提案する際に、メリットとしてお伝えできるかと思います。

管理画面でカンタンに更新ができる

今回Shopify側で用意されているテーマ*を元にオリジナルデザインの適用を行いました。

Shopifyではオリジナルのデザインを適用しても、管理画面からGUIで更新できる(ソース更新ではなく、ビジュアルベースで更新できる)仕組みが作れます。

 

Shopifyで構築すれば、運用者側でソース更新することなく、制作者側に依頼かけずとも

ブログのようにGUIで更新できる!のです。

つまりShopifyを使うと、手間なくノンテックの方でもとても簡単に運用する体制が築けます。

テーマとは:デザインのテンプレートのようなもの。テーマをそのまま使い構築もできますし、テーマを元にオリジナルデザインを作ることもできます。

戦略に合わせて、コンテンツの順序を並び替えられる

クライアント様のご要望として「更新頻度が高いコンテンツを上部に配置したい」という声が寄せられます。

例えば、「ブログコンテンツ」や「お知らせ」等々。

一方でストーリー展開を意識した場合、初めてユーザーに見てもらうサイトの場合、順序としてまずは自己紹介から入りますよね。

「私は◯◯です。◯◯◯をやっているサイトです。よろしく!」

このサイトはなんぞや的な紹介ですね。

この構成を優先とした場合、ページ最上部に配置することが適しています。しかし時が経ちサイトリリース後、リピーター層が多くなった場合は、ユーザーにとって何度も見なくてもよいコンテンツになるため、下に配置変更したくなる時が訪れるかもしれません。

この点Shopifyでは柔軟に応えることができます!

先程紹介した管理画面のGUIで上下に移動させ変更することが容易にできるのです。

つまり、サイトの戦略に合わせてコンテンツの配置をいつでも簡単に変更できるので叶えられるのです。

構築のポイントは、

配置を変更しても自然な見え方になるようデザインする!です。

今回紹介した以外でもShopifyが得意としていることはたくさんありますので、構築の検討をされている方はお問い合わせ頂き、ご質問いただけたらと思っております。

 

株式会社ジョーレンではオリジナルのデザインから、Shopifyのテーマ(テンプレート)を使った構築まで、業種ジャンル問わず幅広く承っております。

「こういった機能を付けたい」等、機能面に関するご相談も承ること可能ですので、お気軽にご相談ください。

EC業界トップクラスの実績!自社ECサイト構築が398,000円から
EC業界トップクラスの実績!自社ECサイト構築が398,000円から