よくある質問|メンズ医療脱毛のレーザースキンクリニック【公式】 Ogawa | 東京のWeb制作会社・ホームページ制作会社 | SPIQA DESIGN(スピカデザイン)

よくある質問

Ogawa

Q 【サイトレビュー】秋こそ食べたい!りんご飴のサイト

秋になって早々におでんを作ったコーダー、オガワです🍢

長かった夏も終わって、いい感じに涼しくなって食べ物も美味しくなって…
秋っていいですよね🍂

毎週行っているトレンドデザイン勉強会で共有するサイトも秋の味覚っぽい内容がないかなぁ〜と探してみたところ…
これだ!というサイトがありました!

今回は「りんご飴」のサイトをレビューしていきたいと思います🍎

今回レビューするサイト

今回レビューするのはりんご飴の専門店「リンゴアメの林檎堂」さんのサイトです!

りんごをイメージできる配色と、ポップなデザインがとても印象的で今回選びました。

競合サイト

サイトのポイントを分解する前に、競合の「りんご飴」を取り扱っているお店を調べてみました。
配色やテイストは次のとおりです。

サイト1:代官山Candy apple

配色:【ベース】白【メイン】黒【アクセント】赤
サイトに来た瞬間に「あ、りんご飴だ!」とわかるような写真がFVのスライダーに使われています。
全体的にシンプルでわかりやすいデザインでした。

サイト2:ポムダムールトーキョー

配色:【ベース】白【メイン】黒【アクセント】赤
こちらもFVに大きくりんご飴の写真が使われていて、シンプルなデザインです。
サイト1よりも写真の面積が大きいので、写真で世界観が表現されているなぁと思いました!

今回のサイト

次は今回見つけたサイトを競合サイトと同じように分解してみました。
配色まわりは似ているような感じがありますが、ベースやデザインのテイストで差別化されていることがわかります!

今回のサイト:リンゴアメの林檎堂

配色:【ベース】薄い黄色【メイン】黒【アクセント】赤
競合サイトが白ベースだったのに対し、ベースは薄い黄色。
デザインもポップで他とは違った独特な世界観があります!

良いな!と思ったポイント

ポイント1:どんなサイズにしても世界観が崩れないFV

スマホのサイズからタブレットのサイズまで、デバイスの幅が増えてきた今日この頃。
今回のサイトはどんな幅、高さで見ても崩れないように作り込まれています!

PCではメニューを上に表示してスマホではバーガーメニューにするお決まりに近いデザインではなく、PCから横のバーガーメニューになっているとスマホでもそのままの世界観を表現できますね!

ポイント2:あえてはっきりしない写真を選定

りんご飴だ!とはわかりつつもぼやっとした写真が使われていることによって、サイトを開いた時にまず大きく載せたロゴに目が行きます。

FVは商品がきれいにはっきりと写っている写真が多い印象なので、今回のサイトのようにぼやっと世界観の表現に使われているのは斬新で素敵だなと感じました✨

ポイント3:商品ごとに色を変える工夫

商品一覧である「フレーバー」の部分で商品をクリックすると商品の詳細が表示されます。
詳細のページでは、文字色がフレーバーごとにそれぞれにあった色が設定されています。

細かい部分ではありますが、遊び心のあるこだわりがあるとつい全部の商品を見てみたくなりますね!

配色について考えてみる

せっかくなので、この配色にしている理由を私なりに考えてみました!

りんごと言えば「赤」の印象が強いと思いますが、りんご飴をかじると「薄い黄色」が見えてきます。
ヘタの部分やさらに内側には「黒」の種がありますよね?
今回のサイトはその「りんごの断面」を表現した配色にしているのではないかなと思っています。

外側の「赤」のイメージも大事ですが、断面の色を使うことで「これぞりんご🍎」という世界観が表現されているのではないでしょうか!

なぜこのデザイン?どういう効果が期待できる?

競合サイトがシンプルなのに対し、なぜこのポップなデザインなのかな?というのを考えてみました。

「フレーバー」の内容をよく見てみると、若者向けで「映える」ような商品が多い印象です。
そのため、ターゲットを10〜20代の若いユーザーに設定し、若者に親しみやすいポップなデザインにしているのかと思います。

また、今回のサイトのお店が固定の実店舗だけでなくポップアップストアを行う機会が多いようです。
お店の顔である「ロゴ」の印象が残りやすいサイトにすることで、パンフレットや街中で「見たことがある!」と感じてもらいやすくなる効果が期待できそうです!

まとめ

ポップで可愛いだけでなく、写真もおしゃれでとても参考になるサイトでした!
(そしてお腹が空きますね…!笑)

今後もトレンドデザイン勉強会での共有内容をこのスピカマガジンに掲載していく予定なので、どうぞお楽しみに!

Q コーダーのいちにち

最近、仕事を始める前にTwitterを覗きがちなコーダー、小川です!
(ちなみに、スピカデザインのTwitterはこちらです)

日々の業務の中でなんとなく毎日こんな感じだなぁ…というルーティン的なことってありますよね。
コーダー歴も5年目になって、だいぶ1日の流れがお決まりになってきたので、今回はそのことについて語ってみようかと思います!

出勤〜始業時間

Apple Musicで音楽をランダムに聴きながら出勤

電車で渋谷のオフィスに向かう道中、決まった曲を聞かずにだいたいランダム再生で音楽を聴いています。
クラシックを聴く日もあれば最近のヒットチャートを聴いている日もあったり…。
食わず嫌いならぬ、聴かず嫌いをしないようにしてます🎧

毎日あえて違う音楽を聴いていると意外な人がカバーを出していたり、違うアレンジが出ていたり…ちょっとした発見があって面白いですよね!

とりあえず、コンビニに寄る

ルーティンの一つに「朝、アイスコーヒーを飲む」というのがあるので、暑い日も寒い日もとりあえずコンビニに寄ります。
ありがたいことに、通勤路にセブン、ファミマ、ローソンが揃っているので気分で行きたいコンビニを選べています…!笑

そこで必ずお菓子と飲み物の棚を覗き…🍡
新作のお菓子や面白いデザインのパッケージがないかなぁ…なんて思いながら棚を見て回ってます。
季節感も流行もわかって楽しいですが、痩せられもしないのでなんともいえない楽しみ…( ´ ▽ ` )

パソコン準備したらTwitterを覗く

冒頭でも書いたように、仕事始める前にまずTwitterを覗いてます!笑
面白いネタもあれば真面目に新しい情報もあるので、情報収集をしながら頭を仕事モードに切り替えてます🖥

午前中〜休憩時間

スケジュール、連絡チェックとタスク整理

最初にやるのはわりとコーダーに限らず社会人のテンプレと同じことです。
ミーティングや時間の決まった公開作業がある時は、忘れないようにふせんに書いてモニター台に貼り付けてます。
(裏の配線…そろそろなんとかしないと…)

事務作業や修正系の単純作業を先に終わらせる

タスクを整理すると、新規コーディング以外にも事務作業や既存サイトの修正依頼など…細かい単純作業が結構あります。
新規案件には集中できる時間を確保したいタイプなので、まずは単純作業を午前中に終わらせてます!

休憩しながら本かブログ記事か楽譜を読む

単純作業が一式終わるとだいたい13〜14時くらいになっているので、その辺りに休憩を挟みます。
スピカデザインは休憩時間が自由に取れるので、その日のスケジュールでいい感じの時間に1時間取ったり、一旦ごはんだけ食べて仕事に戻って、落ち着いたタイミングにおやつ休憩していることもあります!笑
(案件が詰まると17時くらいになることもありますが、お昼ごはんを食べてないので食べるご飯は「お昼ごはん」です!!)

休憩時間はだいたいコンビニでおにぎりを買ってきて、本やブログ記事、楽譜をひたすら読んでます📚
文字読む時間欲しさにあんまり外に行かない、インドア休憩派です。

いよいよ集中する午後

午前中が集中していないわけではないですが…個人的には休憩後が仕事の本番です!笑
新規案件のコーディングや難しい仕様の作り込みを集中してガッと作業します✨

集中すると甘いものが食べたくなるので、ここで朝買ってきたおやつが大活躍🙌
コーダーの福利厚生にチョコレート代が欲しい今日この頃です!笑

キリがいいところやその日ここまで行くぞ!と決めたところまで作業ができたらその日の仕事はおしまいです。
30分くらい悩んでもいい案が出ない時はそこでやめて帰ることもあります。頑張れ明日の自分!

まとめ

こうやって書いてみると、スピカのコーダーは結構マイペースに働かせてもらってますね…。おやつ休憩取れてますし🍫
そんな環境で働いているからこそ、時間をやりくりして自分のやってみたいことに挑戦したり、コードで遊んだりできてます!笑

機会があれば、他の職種の人の1日も聞いてみたら面白そうですね!

Q Suicaのアイコン、コーディングしてみた!

最近、スマホにICカードを移したらパスワードを忘れてチャージができなくなったコーダー、オガワです。

QRコードに引き続き、何をコーディングしようかな…と日々考えていました。
虚無にならず、短時間で作れるもの…。笑

思い当たるものは時間がかかりそうだなぁ…と思いつつデスクの引き出しを開けると、シンプルなデザインのカード、PASMOがありました。

このデザインならサクッと作れそうな気がして、早速画像を調べていると検索結果に別のICカードのアイコンが。

Suicaのペンギンって可愛いですよね。

ということで、最初に見かけたPASMOではなく、今回はSuicaのアプリアイコンをコーディングしてみました!

下準備不要、コーディング開始

今回のデザインはほぼ丸と四角。
分解しなくてもある程度は作成するイメージが湧きました。

普段複雑なデザインをCSSで作るときは紙に分解した設計図を書き出すのですが、今回はそのままコーディングを進めていこうと思います。

シンプルなので、目標時間は30分。
時間をかけずササっと作りたいと思います!

開始5分、早速詰まる

背景の緑色を作り、顔のベースの位置を整え…。
かなり良いスタートが切れたところで、早々に詰まりました。

「この口の微妙な曲線…CSSでどうすれば…?」

(作っていたのが金曜日の通常業務終了後だったのもあり、帰りたさであまり頭も回らず…。笑)

ユニットメンバーにアイデアを聞いたところ、「 ) 」を回転させればいけるのでは?という素晴らしいアイデアをいただきました!!

早速作りかけのアイコンに「 ) 」を入れてみたところ、デフォルトのフォントではなんとなく惜しい印象…。
シンプルが故に妥協できない部分だったので、google fontに駆け込みました。

色々なフォントを見比べてみて、一番この口に近かったフォントはMontserratでした!
今後コーディングしてみる方は参考にしてみてください!笑

バランスが難しい…

口の問題が解決したので、次は目の位置を整えていきます。

パーツの少ないキャラクターは一つ一つの位置で印象が変わりますよね。
調整している途中、なんとも言えない顔になりかけました。

目と口の位置で印象がだいぶ変わりますね!

完成したアイコンがこちら

口の部分以外はサクサクと作れたので、予定よりは少しかかってしまいましたが45分くらいで完成しました!

See the Pen suica by spiqa design (@spiqa_design) on CodePen.

実際のアイコンとの比較

左:コードで作ったアイコン / 右:実際のアイコン

それなりに再現ができたかと思いますが、やっぱり細かい部分のバランスが難しかったです…。
次は今回作らなかったPASMOや、ペンギンの全身を作ってみようかなと思います!

コーダーが遊んだ記事はこちら

Q QRコード、コーディングしてみた

スマホのカメラ、うっかりインカメにしがちなコーダー、オガワです!

ユニットミーティングのとき、駅看板をコーディングしてみた記事を読んで大爆笑したのと同時に、すごく楽しそうな遊びだ…!!と思いました。

CSSの限界に挑むの、楽しくないですか?

思い立ったが吉日!私もやろう!ということで、早速案出し。
好きな本の表紙、自由の女神、カレンダー…
悩んだ末、「あれ?これはサクッと作れるのでは?」と思ったものが見つかりました。

白と黒の正方形だけで作られたシンプルかつ、よく見るアレ。
QRコードです!!

CSSで書いたQRコードは果たして読み込めるのか!?
早速コーディングしてみたいと思います!!

【元祖】遊んでみた記事はこちら

まじめに設計を考える

普段、コーディングをするときにデザインを印刷して設計を考えるので、対象のQRコードを印刷。

プリンターから用紙を取ったとき「何やってるんだろう…?」と正気になりかけました。
これは正気になったら負ける( ˙-˙ )

とりあえずCSSのグリッドで組むかなぁ…と、やんわり考えながら数を数えます。

大きい四角は7×7、その間は11だったので、全体は25×25。
グリッドの数が決まって、一息ついたところでふと閃きが。

これ、tableタグなら30分くらいでいけるのでは!?

コードの組み方がわかると、なんだかスッキリしますよね!!
テンションも上がってきました!!

…思い返すと、この時がやる気のピークでした。

ベースのコードを作る

タグが決まったところで、メモ帳(という名のSublime Text)に下書きをしていきます。
trとtdの数を見て、2度目の正気に戻りかけました。

こんな数のtd、案件の中でも見たことないですねぇ…( ˙-˙ )

ベースが固まったところで、見ながら調整をするためにcode penに一式を移します。

なかなか綺麗にできたなぁ〜!と思っていたのですが…

これ、下じゃなくて上ぇぇぇ!!!!!!

…これで、この日のコーディングは辞めました( ˙-˙ )

【ここまでの作業時間:30分くらい】

肝心な中央エリアを作る

1日目のミスを真顔で修正し、いよいよ本格的に中身のコーディングです( ˙-˙ )
これはコーディングなのか…?
よくわからなくなってきていますが、地道に黒い部分を書いていきます。

この辺りまで作って、QRコードコーディングのハックが掴めました。

印刷した画像に付箋貼り付けると、その列が見やすいからズレない…!!

枠組みを作ったり、大きい四角部分を作っているとき、何度もtdの数や黒い位置がズレました。
数えているはずなのにと思いつつ組み直して、違うところがズレて…。
思っていたよりも辛かったので、この発見にはかなり救われました!!

【ここまでの作業時間:1時間くらい】

虚無の仕上げ作業

ついに全部作り終わり、やりきった喜びを噛み締めながらiPhoneでQRコードを読み込んでみます。
問題なく読み込めれば終わり!!と思ったのも束の間、大事件が発生しました。

QRコードが読み込めない…。

もしかして、CSSで作ったQRは読み込めない?!SVGはいけるのに?!
何気なく使っているQRコード、実は裏に特殊な仕様がある?!

そんなことを考えながら、正しいQRコードを横に並べて比較すると若干のズレが。

左:作ったQRコード / 右:正しいQRコード

これ、何段目のどこがズレてるんだろう??笑

…普段の案件でも使っている、重ね合わせるgoogle chromeの拡張機能を使いながら最終調整をします。

ついに完成!!

微妙なズレを直して、ついに完成しました!!
(重ね合わせたら5マス分くらいしか違いがなかったです。QRコードって繊細ですね( ˙-˙ ))

最後の調整を合わせて、コーディングした時間は1時間30分くらい。
30分でいけると思ったので、意外と時間がかかった印象です。

完成品がこちら!!

See the Pen QRコード by spiqa design (@spiqa_design) on CodePen.

今回作ってみて掴めた、QRコードコーディングするときのコツがこちら。

  • 印刷したデータで数を数えないと直感はきつい
  • 付箋ってすごい
  • QRコードは少しのズレで読み込めなくなる
  • 正気に戻ると作業に戻れない( ˙-˙ )

皆さんもぜひ、QRコードコーディングしてみてください!!笑
(私はもうこの1回でお腹いっぱいです( ˙-˙ ))

コーダーが遊んだ記事はこちら