【MakeShop】商品レビュー

こんにちは。お仕事いただけるのが嬉しいWebディレクターのひよっこです。

メイクショップを絶賛勉強中です。

商品レビューはクリエイターモードとベーシックモードでそれぞれ見た目が変わります。

例えば、長文のレビューだった場合、ベーシックモードでは「▼続きはこちらから」という折りたたみ式表示になります。
一方のクリエイターモードでは、折り畳み式表示ではなく、丸々全文の全展開式表示になります。

このような違いがあるためお客様に送るワイヤーフレームは、長文にしたときの表示方法をきちんと書いておくのがポイントだそうです!

あとからのツッコミを少しでも減らせるように、最初からきちんと説明しておくことが大事なんですね…。

クリモ・ベーシック講習まとめ

こんにちは。Webディレクターのひよっこです。

本日はメイクショップのクリモ・ベーシック講習を受けたのでその内容をまとめます。

【ベーシック】
・検索:最初からある
・買い物かご:マウスを置くと吹き出しが出てくる
・メインのスライド:幅max
・カテゴリー:3つ
・TOP:4列固定だけどランキングだけ自由
・レビュー:「続きはこちらから▼」という表示が出る(折りたたみ式)
・最近閲覧した商品:SPは表示されない

【クリエイター】
・検索:「Wabisabi」のテンプレートでは、クリックすると検索窓が出てくる
・買い物かご:リンクのみ
・メインのスライド:自由
・カテゴリー:3つ
・TOP:PC→4列自由
     SP→2列
・レビュー:全文(全展開式)

勉強することがまだまだあると改めて知らされた一日でした。

拡大縮小するとレイアウトが崩れる

こんにちは。ついつい食べ過ぎてしまうWebディレクターのひよっこです。

メイクショップのテスト構築を絶賛勉強中です。

ある程度見た目のデザインは完成しつつあるのですが、拡大縮小するとレイアウトが崩れてしまうという事態が発生…。
色々調べたのですが、まだ解決方法がわからず…。

ひとつわかったことは、

〇崩れるサイト
拡大縮小を考慮して実装していない。横幅と縦幅を固定で実装している。

〇崩れないサイト
拡大縮小を考慮して実装している。
横幅固定 + 縦幅自動
横幅自動 + 縦幅自動

まさにその通りだな、と思いました。メイクショップの勉強頑張ります。

【Photoshop】パスで画像の切り抜き

こんにちは。最近肉付きが良くなってきたWebディレクターのひよっこです。

私は入社して初めてPhotoshopを使用し始め、まだまだ慣れていないのが現状です。

今回はパスで画像の切り抜きを行おうとしたのですが、私には難しくて諦めモードに…。
慣れれば簡単だそうですが、あまり触る機会もなく、普段からたまに練習しておこうと思います。

ばりばりフォトショ使っているデザイナーさんはすごいなと感じた一日でした。

ヒアリング2

こんにちは。Webディレクターのひよっこです。

本日3回目くらいのヒアリングに参加させていただきました。

その後に議事録作成、ワイヤーフレーム作成と続くのですが、前回よりも少しスムーズに行うことができました。

もちろんまだまだではありますが、数をこなして一人前のディレクター目指して頑張ります!

教える側は難しい

こんにちは。Webディレクターのひよっこです。

只今実習生さんにブログ記事作成の依頼をしています。

作成してくださったものはこちらでチェックして修正するようにしているのですが、アドバイスなどをするのはとても時間がかかりました。

先輩は作成してもらった文章をPDF化してそれにコメントを書き込みすると教えていただきました!

教えてもらうは簡単ですが、教える側となると色々な工夫が必要ですね。
教え方のコツを教えていただきたいものです…。

Googleスプレッドシート

こんにちは。日焼けしたところが痛いWebディレクターのひよっこです。

今回はGoogleスプレッドシートについてです。
Googleスプレッドシートとは、Google社が提供している表計算ソフトウェアのことです。

ExcelのようにソフトをPCにインストールして使用するのではなく、インターネットを使用するので、ダウンロードやインストールは必要ありません!
また、複数人による同時編集が可能になっているので、作業効率がアップします!

是非Googleスプレッドシートを活用してください~!
https://docs.google.com/spreadsheets/u/0/

AUN

こんにちは。Webディレクターのひよっこです。

入社したての頃に先輩に「AUN」という便利ツールを教えていただきました。
https://aun.tools/

これはスクリーンショットや画像の共有ツールです。

スクリーンショットや画像にメモを付けて簡単に共有することができるので、業務上で幅広く活用されています。

このような便利なツールは、ブックマークに入れておくと便利です!!

正確に答えるために

こんにちは。運動不足のWebディレクターのひよっこです。

ディレクターであれば、お客様の質問に正確な回答をしなくてはいけません。
そこでよく先輩が説明されていることをまとめてみました!

・クリエーターモードとベーシックモードの違い
・1カラムと2カラムの違い

先輩方のように説明できるか不安ですが頑張ります。。。

ワイヤーフレーム

こんにちは。お盆休みを満喫したWebディレクターのひよっこです。

先日アシスタントとしてヒヤリングに参加したとき、議事録だけでなく、お客様に送るワイヤーフレームも作成しました。

議事録もワイヤーフレームもテンプレートがあり、ワイヤーフレームは議事録に沿って不要な部分を削っていきます。

初めてで合っているか不安でしたが、期限内に提出できて一安心でした…。
期限だけは過ぎないようにとことん注意したいと思います。

difff

こんにちは。髪を切りすぎたWebディレクターのひよっこです。

前に先輩に教えていただいた下記サイトを共有したいと思います。
https://difff.jp/

これは、どこがどう変わったのかの差分チェックに役立つツールです。

使い方は非常に簡単!比較したい2つのテキストデータをブラウザ上に張り付けて「比較」ボタンを押すだけで、サクッときれいに差分を表示してくれるという優れものです。

このような便利ツールを見つけたら、ブックマークに入れておきましょう!

正式にディレクターになりました!

こんにちは。お休みが嬉しいWebディレクターのひよっこです。

実はひよっこ、ディレクターなのかコーダーなのかはっきりと役割が決まっていませんでした。

が!本日正式にディレクターとして成長していくことになりました!

9月からディレクターのお仕事を頂けるそうなので、一生懸命働きます!!

よろしくお願いします!!

メールアドレス暗号化ツール

こんにちは。Webディレクターのひよっこです。

先日下記サイトを教えていただきました。
https://www.luft.co.jp/cgi/coding.php

このサイトはメールアドレスを自動的に暗号化してくれるという、すごく便利なツールです!
暗号化することで、Web上に公開しているメールアドレスを保護してくれます。

こういった便利サイトは、見つけたらブックマークに入れておくと少しずつ業務がスムーズになりますね!

ヒアリング

こんにちは。Webディレクターのひよっこです。

本日は先輩のアシスタントとしてZOOMでのヒアリングに参加させていただきました。

今回は議事録を作成するため、お客様との会話内容をひたすらにメモを取っていたのですが、
大事な部分をいくつか聞き落しており、議事録を作成するときは先輩に助けていただきました…。

まだ慣れていないということもありますが、聞き落していたことがあったのは確かなので反省しております…。

お客様と会話し、聞いたことをメモしながらアドバイスもきちんとできる先輩は、やっぱりすごいなぁと感じました。

これからどんどん経験して、まずは流れから覚えていこうと思います!

Google Analytics

こんにちは。コロナのせいで楽しみにしていた予定が潰れていくWebディレクターのひよっこです。

先日Google Analytics(グーグルアナリティクス)というツールを初めて使用しました。

Google Analyticsという言葉自体初耳だったのですが、Google Analyticsとは、GoogleのWebサイト解析ツールのことです。
ユーザーがWebサイトに訪問した後にどのような行動をしたかが一目でわかります。(すごい…!)

ユーザー行動を分析することにより、検索順位を上げることができたり、商品の購入や会員登録、資料請求などのコンバージョン数などを改善できたりします。

ひよっこはGoogle Analyticsを使って月のページの閲覧数をまとめました!
まとめたものは企業様の会議に使われるそうです。

Webサイトからの集客や売り上げを伸ばしたいのであれば、確実に導入するべきだと言えますね!

わからないことは早めに聞く!

こんにちは。なんだかんだ忙しくなってきたWebディレクターのひよっこです。

今回のテーマはわからないことは早めに聞く!です。

今日は初めて行う業務があったため、初歩的なことで苦戦していました。
その結果、かなりな時間を無駄にしてしまっていたと気づき、大反省しております。

最終的には先輩方に助けていただいたのですが、困ったときは早めに聞くのが1番ですね…。

こまめに保存しよう!

こんにちは。今週末に川へ遊びに行く予定のWebディレクターのひよっこです。

今回はこまめに保存しよう!についてです。

何かの編集作業をする際、作業が進んだらこまめに保存するようにしましょう。
ゲームなんかでも、セーブし忘れて初めからになった…なんて経験はありませんか?

ひよっこも保存し忘れて、30分頑張った作業が水の泡になってしまったことがあります…。

そうならないために、こまめに保存しておきましょうね。

ページ内リンクの書き方

こんにちは。海より川派なWebディレクターのひよっこです。

今回はページ内リンクの書き方についてざっくり説明します。

まず「ここにジャンプしたい!」というタグにidを指定します。
次に<a href=”#id名”>の形でリンクを作ります。

これだけでジャンプボタンの完成です!リンクをクリックすれば、指定したidタグの位置までジャンプします。

id=”~”を指定してジャンプ先にするのはどのタグでも問題ありません。見出しタグでもpタグでもdivタグでもOKです!

詳しくは下記URLを参考にしてみてください~。
https://saruwakakun.com/html-css/reference/link_jump

メイクショップの複数商品画像登録

こんにちは。メイクショップ勉強中のWebディレクターのひよっこです。

今回は商品詳細ページの複数商品画像登録する方法についてです。

商品詳細ページの商品の画像を複数登録したい!という場合は、
【商品管理】→【商品の設定】→【商品の登録/修正】画面の、「複数イメージ登録」という青色のボタンを押します。

そこに画像をドラッグ&ドロップするだけで簡単に画像を複数登録できました!

詳しいことは下記URLに載っていますので参考にしてみてください~。
https://ms-manual.makeshop.jp/multi_registry/

文字化けしたときの対処法

こんにちは。8月が待ち遠しいWebディレクターのひよっこです。

サイト編集を行っているときのお話です。

テキストデータを開いたら、一面に心当たりのない文字がビッシリ…!
そう、文字化けしてしまっていたのです。

困っていると先輩が助けてくださいました。
今回は「Shift_JIS」で作成したテキストを「UTF-8」で開いてしまったため、文字化けが起こったそうです。

そうなったときは、作成時の文字コードを指定して読み込むように、と教えてくださりました。
なお、テキストエディタなどのアプリでは文字コード設定が「自動選択」になっていることが多いそうです。
自動選択でうまくいかない場合は、文字コードを指定して再度試してみてくださいね!

また、文字化けの原因になりやすい環境依存文字は使わない方がいいとのことなので注意しましょう!