年末年始休業のお知らせ(2022年-2023年)

日頃はご愛顧を賜り厚く御礼申し上げます。

誠に勝手ながら休業期間を下記の通りとさせて頂きます。
ご迷惑をお掛け致しますが、何卒ご了承願います。

<休業期間>
2022年12月29日(木)~2023年1月3日(火)

※2023年1月4日(水)から通常営業致します。
※休業期間中、Webサイトからのお問い合わせは通常通り受け付けておりますが、ご連絡は2023年1月4日(水)以降となります。

株式会社NTTコミュニケーションズ様 AI電話サービス プロモーション支援
デジタルマーケティングによる顧客開拓、社内外への認知拡大、新規顧客開拓のためのプロモーション施策設計を担当制作いたしました。

対応範囲・工程: サイト保守、ウェビナー/展示会出展支援、SEO施策


AI電話サービス
https://ai-tel-info.jp/

医療法人財団綜友会 新宿野村ビルメディカルクリニック様 Webサイト構築支援

WordPressを使用したクリニックサイトの構築のほか、院内の撮影からWEBデザインまでのアートディレクションを担当いたしました。

対応範囲・工程: アートディレクション、院内撮影、デザイン、フロント構築、サーバ設計・構築、 システム/画面設計・実装


医療法人財団綜友会 新宿野村ビルメディカルクリニック様

22年の7月からデジナーレに参画した西田です。

 

この記事では前編後編の2回にわたり、デジナーレ(東京)で実施されているTipsの発表・面白いサービスの共有について取り上げ、どんなひとがデジナーレで活躍していけるかを考えてみました。

この活動を取り上げて発信したいと思ったきっかけは、自分が体験してシンプルに面白かった、
将来的にもっと多様な価値観を持つメンバーとこの時間を過ごしていきたいと思ったからです。

 

今回は、この活動や採用に対するデジナーレの考え方を深堀りすべく、デジナーレの代表取締役である水野さんに直接お話を伺いました!
今後も採用活動を続けていくうえで、どんなひとと働いていきたいかというところまで掘り下げた内容になりますので、会社の雰囲気を知りたい方に加え、デジナーレの採用に興味をお持ちの方に是非読んでいただきたいです!

 

転職して間もない私の視点から、定例の活動内容を通してデジナーレの考え方をお伝えできればと思います。

 

まず、私が感じたデジナーレの魅力からお伝えします。
デジナーレは、新規事業やそれに付随するUI・UXを企画・制作・プロモーションまで一気通貫でサポートする会社なんですが、自分の強みを伸ばすとか、多様な価値観を持つチームでより良いUI・UXを作っていくという、デジナーレの考え方や働き方に魅力を感じ入社を決意しました。

 

そして、入社後に、こういう文化いいなぁと感じたのがTipsの発表・面白いサービスの共有でした。

Tipsとは
工夫・テクニックなどの意味を持つ英単語で、デジナーレではノウハウとして捉えています。

現在、この活動は東京チームの定例会議(対面)で行っているんですが、メンバーの強みを知れたり、いろんな考え方を学べたりするので、対面でディスカッションする時間って大事だなと感じています。

業務の一部ではありますが、こういう時間の確保からユニークな発想や案件進行のヒントを得て、常に“成長を楽しんでいる”会社です。

 

それでは、具体的に水野さんにお話を伺っていきます!

 

◆どのような経緯でTipsを書き溜める・発表するようになったんですか?

もともとは「今日の気づき・成長」として日報に書き溜めていたんですが、ただの報告では流れていってしまうため、データベースにしていきたかったことがきっかけです。

ただ案件をこなしているだけだと、自分の中に“ノウハウ”は留まるものの記録としては残らず、「こんなことあったな」という漠然とした経験として残ってしまうんですよね。

その“ノウハウ”を明確にして、自分の資産・会社の資産として積み立てていこうという動きが、tips作成・共有の始まりです。
なるほど、自分にも会社にも溜めていける仕組みなんですね。

実際に書き溜めているTipsがこちら

あと、この活動によって蓄積されたノウハウは、「これだけの実績があるんだから、これは自分の強み」と言える“証明”にもなると思ってます。

 

補足:(デジナーレでは自分の強みを把握し、伸ばしていきたい強みを設定します。

確かに!形になることによって強みがより明確になりますね。

 

◆実施していくうえでの工夫はありますか?

当初はUI・UXに関係するものに限定して登録していましたが職種や案件によっては、UI・UXに繋がっていく強みとしてTipsに落とし込むのが難しいものもありました。
例えば、運用とか日々の成長を気づきにくい案件です。

自分の成長の見える化にもつなげたいと考えているので、まずは気づいて・登録することの習慣化を目指し、Tipsのカテゴリの幅を広げて、UI・UX以外でもまずはアプリにTipsを蓄積していくことを徹底しました。

まずは習慣化させるっていうところすごく大事ですね、ほかにもコツはありますか?
習慣化のコツでいうと、東京チームはローテーションで発表しています。

あと、その年によって評価基準や実施の有無は変わりますが、会社の成長に貢献したという意味で評価されることもあります。
なるほど!より成長や気づきに敏感になれますね。

 

◆Tipsの発表はメンバーにどんな影響を与えられていると感じますか?

この人ってこんな内容の案件を担当していて、何に強みを持っているんだとかを認識できるようにはなっていると思います。
案件で課題にぶつかったとき、HTMLだったら○○さんが詳しいから相談してみようとか、そういうコミュニケーションにつながっていくと思います。

使い方としては、メンバーが既に登録しているtipsを検索して、顧客に話せても良し。この人に相談すればいいんだと分かれば良し。
こんな形で使っていきたいです。

そういう使い方もあるんですね。
検索して振り返ることができるのはアプリに蓄積するメリットですね。

 

前編ではTipsについてのお話を伺いました。
次回、後編では定例の後半時間に実施される面白いサービスの共有について伺い、
デジナーレで活躍していけるひとや、どんなひとと一緒に働いていきたいかをお伝えできればと思います。

拝啓

清秋の候、時下ますますご清祥のこととお慶び申し上げます。
平素は格別のご高配を賜り厚く御礼申し上げます。

さて私儀、

このたび、板倉譲治の後任として代表取締役に就任いたしましたことを謹んでご報告申し上げます。
つきましては、微力ではございますが全力をつくして業務に専心精励いたす所存でございますので、前任者同様格別のご指導ご鞭撻を賜りますようお願い申し上げます。
まずは略儀ながら書中をもちまして御礼かたがたご挨拶申し上げます。

敬具

令和4年10月
株式会社 デジナーレ
代表取締役 水野 直樹

こんにちは、デジナーレのA.水野です。

日本でも4月に「改正個人情報保護法」が施行されましたね。最近弊社でもGDPRやこの改正個人情報保護法を意識したWebサイトの対応がふえてきました。
みなさんのサイトの対応はお済みですか?

今回は改正ポイント6つのうちの1つ、Webサイトに携わる人が気になるCookieの取扱いについて解説していきます。
Cookieとは?
Cookieが規制対象になる場合、ならない場合
確認行為について明示されていること3つ
まとめ

Cookieとは?

Cookieとは、簡単にいえば「閲覧者の情報」をブラウザに保存する仕組みです。
情報を記録することで、ユーザーは2度目にサイトを訪れた際に情報の再入力なしでログインできる、商品を購入する際に住所などの入力を省くことができるといった利点があります。Cookieはユーザーのみだけでなく、サイト運営側にとっても重要なものです。Cookieによって取得した情報で、ユーザーに合わせた情報を提供することができ、またユーザーに合わせた広告を掲出する等にも活用されます。



cookieには、以下の2種類があります

①自社《サイト運営企業》が発行するファーストパーティクッキー(1st Party Cookie)
 ┗自社のWebサイトに訪れたユーザーの情報を保存するために活用されている


②第三者《サイト運用企業以外》が発行するサードパーティクッキー(3rd Party Cookie)
 ┗複数のサイトを横断して閲覧した履歴を追跡していくために使用し、その情報をさまざまなデータと紐付けて活用されている。
  ウェブ広告のターゲティング等に利用
  

Cookieが規制対象になる場合、ならない場合

Cookieは「個人関連情報」という位置づけで、これ単体では「個人情報取得」には該当しません。
ただし、個人情報と紐づけた場合は、Cookie情報も「個人情報」になってしまいます。
そのため、個人情報と紐づける場合はCookie情報取得についてユーザーの同意を得る必要があるとされています。


下の図のように、A社単体の場合は個人情報を取り扱っているとは言えませんが、
B社のCookie情報の使い方は、個人情報保護法の規制対象になると考えられるのです。


cookie解説図

つまり、下記のようになります。

A社は個人情報を提供しているわけではないのでユーザーからの同意不要
B社は、個人情報と紐づけるため、同意が必要と考えられます。
ちなみに、実際には個人情報と紐づけしていなくても、紐づけが可能な環境であれば、同意を取っておいた方が安心ですね。

なお、図の左下の方にあるX社・Y社においても同様になります。
例えば、Y社は個人情報と紐づけられない環境であれば、cookieによって得られる情報を共有していてもユーザーの同意は不要とされてるようです。

こうなってくると、ECサイトや会員制サイトはほぼCookie同意管理が必要になってくるのではないでしょうか?
最近、急激にこのCookie同意バナーが出現するサイトが増えてきたのはこの改正が施行されたからなのです。

みなさまのサイトは実装済みでしょうか?
まだお済でない方はぜひ、弊社までご相談ください。
個人情報取得同意ツールのご紹介
個人情報に関する法律、種類や罰則は?

同意の確認方法について明示されている3つのこと

1.提供元《上の図でいうA社》は、同意を取得したことについて、提供先《上の図でいうB社》の申告内容を一般的な注意力をもって確認すれば良い

2.提供先《B社》が同意を取得したと虚偽の申告をして、個人関連情報を個人データとして取得した場合、「不正取得」に該当する場合がある

3.提供先《B社》から提供元《A社》に対して、本人同意を取得しているID等を提供する行為は、個人データの第三者提供に該当する場合があるが、確認行為において必要な情報のみを伝える場合には、本人の同意取得は必要ない

確認行為とは
① 同意取得義務(改正26条の2第1項1号)  「個人関連情報取扱事業者」から「個人関連情報」の提供を受ける「第三者」は、「個人関連情報」(「個人関連情報データベース等」を構成するものに限る。)を個人データとして取得することが想定されるときは、法23条1項各号に該当する場合を除いて、「個人関連情報取扱事業者」から「個人関連情報」の提供を受けて本人が識別される個人データとして取得することを認める本人の同意を取得する必要があります(改正26条の2第1項1号)。

→WEBサイトでいうところのクッキー同意バナーですね
 DMP業者等から個人情報関連情報を取得してあなたを識別させてください、いいですか?という確認に同意したユーザーのIDをDMP業者等に「個人を識別されない状態の情報」で提供する場合は本人の同意取得は必要ないとされているようです。

まとめ

如何でしたでしょうか。今回は改正個人情報保護法で変わるWebサイトcookie管理についてお伝えしました。

AppleはWebブラウザsafariでのサードパーティクッキーの利用をすでに廃止していますがこれに引き続きGoogleもchromeでのサードパーティクッキー利用が2023年半ばには廃止されてしまいます。
この流れを受け、企業が自らデータを集め、営業やマーケティングに活用するという流れが強くなっています。自社で集めたファーストパーティデータは、本人の同意をしっかりと取得して管理を徹底すれば、非常に強力な武器となり得ますよね。

データ収集や管理を得意とするCDP(カスタマー・データ・プラットフォーム)や、顧客へのレコメンドやプッシュ通知などを最適化するMA(マーケティング・オートメーション)ツールなど、ファーストパーティデータを活用するためのSaaSはデジタルマーケティングにおいて基本設備となってきています。

また、少し壮大な話になってきますが、日本の高齢化や人口減少でマーケットに限界を感じれば、海外マーケットに向けたD2Cも今後もっと増えてくるでしょう。そうなったときはGDPRやCCPAの観点の意識も非常に大切になってきます。

次回からは、
・cookie同意管理ツール(CMP)の導入のポイント

についてお伝えしていきたいと思います。

それではまた!

 

こんにちは。デジナーレのサービスプロデューサのA.水野です。

BtoBサービスサイトを作成するとき、どんなサイトにするか迷うことはありませんか?

今回は、BtoB向けサービスの申込フォームのパターンを集めてみました。

最後に、フォームをつくる際のポイントもまとめましたので、良ければ参考にしてみてください。


申込フォームのパターンとは?参考事例を紹介


問い合わせ件数を大きく左右数申込みフォーム、現在はどのようなものが主流なのでしょうか
大きく2パターン、そしてその中でもタイプをわけ、4タイプありました

【1】TOPページ一体型  

  ┗A メインビジュアルの右側にある”最短入力タイプ”

  ┗B ページ下部にある”読み込ませタイプ”

【2】ページ遷移型   
  ┗A フォームのみの構成の”想定内タイプ”

  ┗B 左に情報+右にフォームの”ハイブリットタイプ”


【1】TOPページ一体型

A メインビジュアルの右側にある”最短入力タイプ”
最近増えてきた右上に入力フォームがあるものは、

  • モチベーションを下げずにアクションを促せる  
  • リピートしてきたユーザーがすぐアクションできる
  • ファーストビュー内に収まっているため、入力が簡易的な印象がある(項目も少ない)

というメリットがあります。
BtoBサービスの場合、衝動契約はなく、商材比較検討がベースにあることが多いのが特徴です。そのため、

・詳細理解よりも、とりあえず資料を手元に置きたい
・サービスのことは知っているので資料や問合せがすぐしたい

と考えるユーザーも一定数いるため、メインファーストビュー内でアクションできるのはユーザビリティが良いですね

■AIアナリスト

     

参照元:https://wacul-ai.com/

■ナイル SEO相談室

参照元:https://www.seohacks.net/

■アドナレッジ

参照元:https://service.ad-knowledge.net/lp


■NEWS PICKS
セミナー申込みフォーム例です。個人的にとても好きな形です。
ファーストビュー内に収まってはいないものの、フォームが大きく見やすいです。そして入力を進めながら下っていくと同時に内容が横目で入るので、とてもカンタンに申込みが完了できます。にくいレイアウトです!!無料セミナーは直感的に申しこむことも多いため、フォームへの遷移がわかりにくいと面倒になってしまいます。申し込ませながら理解させるという最短ルートはとても参考になりますね

参照元:https://newspicks.com/

B ページ下部にある”読み込ませタイプ”
下部までスクロールする間にサービス理解を促進させることができるタイプです。

■RICHIKA
説明の代わりにたくさんの動画サンプルがレイアウトされていてユーザーが直感的にサービス理解がしやすい作りになっています。サービスの特徴を早く魅力的に伝えつつ、フォームへ促す導線ですね

            ~ ~中略~ ~

参照元:https://richka.co.jp

【2】ページ遷移型


  ┗A フォームのみの構成の”想定内タイプ”

■スマートHR

参照元:https://smarthr.jp/

■AI電話サービス

 

参照元:https://ai-tel-info.jp/

■キーワードマップ

 

参照元:https://keywordmap.jp/

┗B 左に情報+右にフォームの”ハイブリットタイプ”
TOPからページ遷移はありつつも、右にフォームをまとめ、左で情報記載しています。
デモのイメージがつきやすくなるため、モチベーションを下がりにくくする効果がありますね

■b→dash


■クラウドサイン

 

 

申込フォームをつくるときのポイントは?

では、実際にフォームをつくるときはどのようなことに配慮すればよいか、まとめてみました


①入力項目を最低限にする

住所やフリガナは必要でしょうか?できるだけミニマムになっているかを確認しましょう

②部署名の要否はチーム内で確認できているか
よくあるのが、「やっぱり部署名がないと的確にアプローチできない」問題です…
マーケティング部署側はフォーム入力項目を最低限にしたいが、営業側はすでに既存のお客様であることも確認が必要だったり、部署が不明だと的確にアプローチできなかったりします。
入力項目は営業チームと連携して進めるのがおススメです。

③あえて入力項目を増やして足切り

高額サービスや、営業稼働が少ないサービスに向いている手法です。
予算・立ち位置・導入時期等をヒアリングすることで優先度を決定できます。問い合わせ率は下がるので
リードが減っても回収しやすい高額商品や、リード数が十分にあるサービスでの活用がよいでしょう


④誘導ボタンの文言は適切か?

資料請求と問い合わせはユーザーにとってはハードルがかなり違います。

一般的に資料請求の方がCVRは高くなるため、「問い合わせ」よりも「資料請求」という文言を優先する方がよいです。
また、デモ・お役立ち資料の場合は、きちんとそのように記載しましょう。
「チャットで相談」「電話で問い合わせる」など、問合せ手法も明確化しておくとユーザ側が選択しやすく完結率もあがります。

いかがでしたしょうか。BtoBサービスのデジタルマーケティングは、ある程度型化されていますが
定番の見せ方に頼っていてはレッドオーシャンの中では埋もれてしまいます。。

型化された部分をしっかり網羅しつつ

クリエイティブの面で、よりCVがあがる構成や見せ方を模索し続けることが大切ですね

AWSのサービスTranscribeについて変換精度の検証をしました。

どんなサービス?

音声データを入力し、音声をテキストに変換してくれるサービスです。

検証すること

音声データからどれくらいの精度で文字起こしができるかを検証する。

検証方法

「吾輩は猫である」の冒頭を音読した音声データを文字起こしする。
1.静かな場所で音読している音声データを用意
2.BGMとして雑音(風などの環境音)を流し、音読している音声データを用意(雑音は声と同じくらいの音量)
3.2つのデータをTranscribeで文字起こししてどの程度文章が異なっているかを検証

検証結果

解析結果はTranscribeの出力をそのままコピペしています。

静かな場所での音読

元の文章 解析結果
吾輩は猫である。名前はまだ無い。
 どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕まえて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出くわした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙けむりを吹く。どうもむせぽくて実に弱った。これが人間の飲む煙草(たばこ)というものである事はようやくこの頃知った。
吾輩 は 猫 で ある 名前 は まだ ない
 どこ で 生まれ た か とんと 見当 が つか ない 何? でも すぐ 来 ジメジメ し た ところ で ニヤニヤ 泣い て い た こと だけ は 記憶 し て いる 我が家 ここ で 初めて 人間 という もの を 見 た しかも あと で 聞く と それ は 焼成 という 人間 中 で 一番 同 枠 な 修学 で あっ た そう だ この 焼成 という の は 時々 我々 を 捕まえ て 似 て くる という 話 で ある しかし その 当時 は 何? という 考え も なかっ た から 別に は 恐ろしい と も 思わ なかっ た ただ 彼 の 手のひら の 上 に 乗せ られ て ずっと 持ち上げ られ た 時 何ら か ふわふわ し た 感じ が あっ た ばかり で ある 手のひら の 上 で 少し 落ち着い て 焼成 の 顔 を 見 た の が いわゆる 人間 という もの を 見 始め で あろ う この 時 妙 な もの だ とか 思っ た 感じ が 今 でも 残っ て いる 第 一 系 を 持っ て 装飾 さ れる べき はず の 顔 が つるつる し て あれ で 夜間 だ その後 猫 に も だいぶ あっ たら こんな 形 に は 一 度 も 軸 は し た こと が ない 海 なれ ず 川 の 真ん中 が あまりに 突起 し て いる そうして その 穴 の 中、 から 時々 プププ と 煙い 洋服 どうも お 店 っぽく て 実に 終わっ た これ が 人間 の 飲む たばこ という もの で、 ある こと は ようやく この 殺し た

雑音をBGMにした音読

元の文章 解析結果
吾輩は猫である。名前はまだ無い。
 どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕まえて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出くわした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙けむりを吹く。どうもむせぽくて実に弱った。これが人間の飲む煙草(たばこ)というものである事はようやくこの頃知った。
その はい は 猫 で、 ある 名前 は まだ ない
どこ で 生まれ た バトン と 健康 を 伝える 何 でも 人 ぐらい ジメジメ し た ところ で やや 泣い て い た こと だけ を し て いる 我が家 これ 初めて 人間 という もの を 見 た しかも あと で 聞く と それ は 小説 っていう 人間 中 で 一番 どう 悪 な 人 くらい あっ た そう だ この 焼成 と 言わ れる 時々 我々 を 捕まえ て 似 て くる という 話 で ある と しかし その 当時 は 何? という 考え も なかっ た から 別段 恐ろしい と も 思わ なかっ た ただ 彼 の 掌 が 添え て ずっと 持ち上げ られ た 時 片 中 ふわふわ し た 感じ が あっ て も 借り で ある 手のひら の 上 で 少し 落ち着い て 焼成 の 顔 を 見 た の が いわゆる 人間 という もの が み 一 で あろ う こういう 時 嫌 な もの だ と 思っ た 感じ が いま で お 乗っ て いる 大 事件 を 持っ て 装飾 さ れる べき 元 の 顔 は ちょろちょろ し て まるで 夜間 その後 猫 リンゴ 大和 が あっ たら そんな 方 に は 一 度 も 陸 が し た こと が ない のみ なら ず 川 の 真ん中 が あまりに 時 し て いる そして それ から 時々 ぷぷぷ だけ で よく 道 も 積極 的 に 終わっ た これ が 人間 の 分 は たばこ っていう の ある こと は ようやく この 殺し た

結果について

両者共通の結果
・句読点はほぼつかない
・文字間にスペースが入る
・読み方が何通りかある単語については漢字の間違いがある

静かな場所での音読
・変換ミスはあるものの、なんとなく意味は理解できる

雑音をBGMにした音読
・はっきりと聞こえた単純な単語は認識できているものの、一気に精度は落ちあまり意味は分からない

所感

漢字の間違いなどについては、Transcribeのカスタム語彙という事前に語彙を登録しておくような機能でカバーできるのではないかと思います。
静かな場所ではっきり話していればまあまあの精度で、雑音などが入るとかなり精度が落ちるので人間の声をしっかり聴き分ける能力はまだ低そうです。
今回は純粋に解析だけをした場合の精度検証なので深くは調べていませんが、音声を学習させるような機能もあるので、それを使用して精度を高めることもできそうです。
またレスポンスから何秒時点で何を話したかもわかるので、用途によっては活用できると思いました。

新年、明けましておめでとうございます。

旧年中は格別のお引き立てを賜り、厚く御礼申し上げます。
今後も変わらぬご指導と、末永いお付き合いをお願い申し上げます。

代表からのご挨拶をお送りさせていただきます。
下記URLをご参照ください。

https://www.primal-biz.co.jp/news/info/20220101.html

皆様のご多幸と繁栄をお祈り申し上げます。

令和4年 元旦
株式会社デジナーレ

日頃はご愛顧を賜り厚く御礼申し上げます。

誠に勝手ながら休業期間を下記の通りとさせて頂きます。
ご迷惑をお掛け致しますが、何卒ご了承願います。

<休業期間>
2021年12月29日(水)~2022年1月3日(月)

※2022年1月4日(火)から通常営業致します。
※休業期間中、Webサイトからのお問い合わせは通常通り受け付けておりますが、ご連絡は2022年1月4日(火)以降となります。

はじめに

Lambdaで外部モジュールのPillowを使おうとしてエラーが出ました。
今後も同じ状況が生まれる可能性があるので書き記します。

環境

ローカルPCのOS:Windows
言語:Python
外部モジュールはLambda Layerにデプロイして使います。
今回の外部モジュールの例はPillowです。(Pythonで画像を取り扱うモジュール)
Lambda Layerのデプロイ方法などはたくさん記事があるので本記事では割愛します。

エラー内容

エラーが出た箇所は以下です。

実際に出たエラー内容は以下です。
Unable to import module '関数名': cannot import name '_imaging' from 'PIL' (/opt/python/PIL/__init__.py)

原因

結論としては、モジュールのビルド方法がLambdaを動かしているOSに合っていないことです。
普段SAMを用いてLambdaにデプロイしているのですが、
Lambda Layerにデプロイするときは、ローカルでpipインストールしたモジュールファイルをデプロイしています。
調べていて知ったのですが、Pythonのモジュールによってはpipインストールするときに、
インストールしようとしているOSによってビルド方法が違うものがあるようです。
今回はWindowsでpipインストールしたものをデプロイしてエラーになっています。
requestsなど上記手順でデプロイしても動くものもありますので、モジュールによるのかと思います。

ゴール

Lambda LayerもしくはLambdaへのデプロイ時に使用する外部モジュールのファイル群の入手方法を記載します。

入手方法

調べていて、Amazon Linuxが入ったEC2でpipインストールする方法や、同じくAmazon LinuxをDockerで立ち上げて入手する方法が結構出てきましたがそれでもうまくいきませんでした。
そんな中たまたま開いた公式の記事に入手方法が書いてあったので、そちらを参考にしました。

1.https://pypi.orgを開くと上部に検索ボックスがあるのでモジュール名を入力し検索します。
2.検索結果です。任意のモジュールを選択します。今回はPillow8.4を使うので一番上を選択しました。

3.左のナビゲーションからDownload filesを選択
4.ファイルのリストが出てくるので、任意のWheelファイルを選択します。
左から3列目がPythonのバージョンです。
今回はPython3.9なのでcp39のうち
Pillow-8.4.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl
を選択しました。
ものにより差はありますが、「manylinux_2」「x86_64」と入っている名前のものだとLambdaで動くようです。

5.ダウンロード&展開してファイルを使用

まとめ

上記手順で入手したファイルを使用することで見事Lambdaで動かすことができました。
今後も同じようなエラーが出た時はまずこの方法を試したいと思います。

こんにちは、福岡オフィスの古賀です。

前回前々回と、最近よく見かけるECサイトのヘッダーパーツについてPCトップページを中心に注目してきました。

ピックアップしてきたサイトから獲得できた情報を整理し今回の記事でまとめたいと思います。

 

 

一般的にECサイトのヘッダーに必要で設置すべきものは以下の要素です。

  • ロゴ
  • 会員登録/ログイン
  • 買い物カゴ(カート)
  • カテゴリーメニュー
  • 商品検索窓

スペースや配置レイアウトによって優先順位をつけ見せ方を省略したり、他にも要素があったりとサイトの方針によって異なりますが、大体これらの要素がユーザーに一目で伝わるようにデザインされます。

今回様々なECサイトを見てきて、優先順位をつけるとすれば以下のような傾向が多いのではと思います!

  • 1、会員登録/ログイン
  • 1、買い物カゴ(カート)
  • 2、ロゴ
  • 3、カテゴリーメニュー
  • 4、商品検索窓

会員登録/ログインと買い物カゴ(カート)は今回紹介したサイトはすべて表示していたので同率1位にしました。

2位にロゴとしたのですが、トップページに関しては、ヘッダー上ではなくMVで表現するケースもいくつか見られたので会員登録/ログインと買い物カゴ(カート)よりは下位にしましたが、ファーストビューでは必ず見せるべき要素だと思います。

続いて3位にカテゴリーメニュー、4位に商品検索窓としましたが、こちらの2つはサイトの方針、前回前々回のPC・SP独立型編とスマホライク編のようなサイトの構成で変動するかと思いました。

 

 

2、PC・SP独立型

デザイン上PCとスマホを切り分けているサイトと、サイト構築の構造上PC専用とスマホ専用で分かれているサイトでよく使用されるヘッダーパターンについて簡単にイラストにしてみました。

▼ヘッダー背景あり

PC・SP独立型ヘッダーパターン背景あり

▼ヘッダー背景なし

PC・SP独立型ヘッダーパターン背景なし

このようなレイアウトを選択しているサイトの特徴としては以下のことが挙げられると思いました。

  • PC用とスマホ用にUIを適宜変更し別にすることで、PCの広いスペースを活かしてページの回遊性を上げられる。
  • セオリー通りヘッダーに必要な要素を隠さず表示するサイトが多い為似たレイアウトになりやすい。
  • セオリー通りが多い為初めて訪れたユーザーでも操作に迷いにくく欲しい情報に辿り着きやすい。

実際に注目したサイトの詳細についてはこちらの記事をご覧ください。

投稿が見つかりません。

 

 

3、スマホライク型

PCデザインもスマホライクにデザインされているサイトでよく使用されるヘッダーパターンについてこちらも簡単にイラストにしてみました。

▼PCヘッダーカテゴリーメニューなし

スマホライクPCヘッダーパターンメニューなし

▼PCヘッダーカテゴリーメニューあり

スマホライクPCヘッダーパターンメニューあり

特に海外サイトが多い印象ですが、次のレイアウトもしばしば見かけます。

▼PCヘッダーサイドメニューあり(SPのハンバーガーメニュー)

スマホライクPCヘッダーサイドメニューあり

また、スマホライクなレイアウトを選択しているサイトの特徴としては以下のことが挙げられると思いました。

  • ヘッダーに必要な要素を残しつつ、ターゲットのスマホ操作に慣れている世代のユーザーに合わせたデザイン。
  • レスポンシブデザインの場合、レスポンシブ時の切り替えの違和感が少なく、ソース管理もしやすい。
  • 目に入る情報量が少なくなるので、ビジュアルやコンテンツでの訴求強化に適しているが、メニューを隠す場合はPC上では次のアクションとなるものを探す必要があるのでユーザーが迷いにくいようなコンテンツ構成も重要。

実際に注目したサイトの詳細についてはこちらの記事をご覧ください。

投稿が見つかりません。

 

 

4、まとめ

ECサイトのヘッダーパターンについてPC・SP独立型とスマホライク型を2軸にいろんなサイトから分析してきましたが、この2軸の切り口だけでも、それぞれの共通した特徴が浮かび上がってきたと思います。

サイトのジャンルがまた違うと、必要な要素も変わりますしレイアウトも変わってきます。

また別の切り口で分析してみるのも面白そうです。

サイトをデザインすることは、見た目を良くすることだけではなく、ユーザーにとってストレスなく考えさせない操作性を模索し提供することでそのサイトで伝えるべき情報をいかに明確に伝えられるかが重要だと思います。

その為には、デザインに入る前に、お客様の狙うターゲットユーザー層や、何を重視してサイト作りをしていきたいのかなどしっかりと情報収集し整理していくことが、どんなレイアウトにするのが適しているのか選択していくためにも大変重要なことだと改めて思いました!

今後もお客様のご要望に適切なデザイン提案ができるよう日々の情報収集を引き続き行っていきたいと思います。

お問い合わせCONTACT

お問い合わせ

Contact

フォームよりお気軽にお問い合わせください。
担当者より折り返しご連絡いたします。

採用情報

Recruit

新しいサービス・事業にチャレンジしたい
メンバーを募集しています。