今回は文字と写真のレイアウトを行いました。発注の際の参考になるかと思いますので、詳細を載せておきます。

参考にした資料

「Illustrator & Photoshopデザインの作り方 アイデア図鑑」

今回はIllustrator & Photoshopデザインの作り方 アイデア図鑑を参考にしました。しばらくはこの書籍の内容を元に、自身の素材で製作していく予定です。
「このようなデザインで注文したい」という場合は、該当の記事か画像のURLを添えてお問合せ下さい。

完成作品

2021 BEST BUY

教本の縦長画像が用意できなかったため、同じサイズの画像４枚にしました。

2021BestBuyのロゴは、セリフ体フォントの配置を組み合わせることで表現しているので、単価を大幅に下げることが可能です。
画像にかかった部分で字が読みにくい部分もありますが、全体の雰囲気を優先。

背景が白の為、キャプションを入れて灰色枠を付けました。背景色を付けることも可能ですが、単色をお勧めします。

さいごに

上記のようなレイアウト重視デザインの場合、比較的安価で承ることが可能です（案出しの際の工数や修正などにより変動します）

実績はどんどんサイトに追加していくので、気になりましたらお気軽にご相談お待ちしております。
相談の際は、お問い合わせフォームか公式LINEにお願いいたします。

HP製作を行っていると「画像のサイズ」って気になりますよね。

素早い表示はSEO対策の一環にもなりますし、そもそもアップロードできない大きさのものも。

大きな画像は綺麗ですが、表示が遅くなるのでメリットデメリットが一長一短です。

そこで、Google Chrome Labsが開発したWEBアプリ「Squoosh」がとても便利でした。

メリット

個人的には特にデメリットを感じません。開発元がしっかりしているのもうれしい。

使用方法

1圧縮したい画像をドラッグ

画像をサイトにドラッグするだけで読み込みができます。

この状態で25％圧縮された状態の画像が縦線の右側に表示されています。

2圧縮率を決める

圧縮率を変更する場合は、右下にあるQuality:のつまみを左にずらしてください。

拡大

マウスホイールを回すと画像が拡大/縮小されます。

なるべくズームした状態で確認したほうが劣化の状態を確認しやすいです。拡大/縮小をうまく使い分けてください。

圧縮後のサイズ確認は右下に表示されますので、目当てのサイズまで圧縮するのも可能です。

3画像のサイズなどの変更

Squooshでは色数の変更やカンバスサイズの変更も可能です。

作成した画像であれば、このあたりは不要です。

4完成

全ての設定が終わったら右下の青丸型のDLボタンを押せば完成です。

名前を付けて保存の窓が開きますので、任意の場所に保存してください。

まとめ

圧縮前

圧縮後

Squooshでは、画像の状態を確認しながら画像を圧縮できるツールでした。

圧縮してみて「もっと圧縮かけるべきだった」や「圧縮しすぎて画質が落ちすぎた」といった事が防止できるのでかなり優秀です。

サムネイルや大き目の画像を丁寧に圧縮するのに向いていますので、是非使ってみてください。

Logicool　MX Master 3　詳細

購入の決め手になったのは、サムホイールの存在でした。

前回使っていたSculpt Ergonomic Mouseを使っていて、横方向のスクロールが便利だったのできちんと独立したサムホイールが有ることと
MAG SPEEDという高速ホイール機能がある等、ホイール関係で良さそうな点が多いところが良かったです。

最初のドライバ導入時点が個人的にデメリットだったので、記事の初っ端からデメリット書いてますが、概ね満足ではあります。

商品画像

新品で撮った画像はほかのサイトで沢山出てくるので、半月使った使用後の画像です。

ギャラリー表示なので、クリックするとフルサイズで閲覧可能。

毎日3～5時間ほど、仕事で使用してみました。

エルゴノミックな形状が少し賛否両論のようです。

いわゆる被せ持ちのタイプのMizは快適でした。
操作感にこだわりのある方は、なるべく店頭で実際に触ってから購入を決めたほうが良いかもしれません。

細かいディテールは、公式サイトが一番分かりやすいです。

付属品

マウスとレシーバーと充電ケーブル。
他はかなりシンプルで紙何枚か・・説明書はありません。

Bluetoothで使用する場合はレシーバー不要ですが、レシーバー小さいので使用する場合でも邪魔になりません。

ドライバを入れてみる

マウスを接続すると、勝手にドライバがインストールされて使用可能になりますが、MX Master 3の操作を全て解放（？）するためにはLogicool Optuionsをダウンロードする必要があります。

ちなみにLogicool Optuionsでは、マウスのポインタの速度やLogicoolFLOWの有効化などの設定が可能です。

これの導入が厄介でした。

1まずドライバのダウンロードURLまでたどり着けない

説明書が非常に簡素＆導入マニュアルは付属していない為、サイトを確認することに。

しかし、所々で英文表記になったりして分かりにくい・・

２再起動が必要

これはMizの環境のせいかもしれませんが、インストールが終わったらソフトが勝手に起動するのですが、ソフトウェアが起動段階のまま立ち上がらない。

再起動でどうにかなりました。先に再起動の案内してほしい・・

ドライバを起動してみた

ドライバを起動すると、マウスの設定画面が開きます。

〇部分をクリックすると割り当て変更できます。

ジェスチャーボタンのプリセットは個人的に使わないので、メディアコントロールに変更。

ボリュームの変更はキーボードでも可能ですが、キーボードに手を伸ばさなくてもいいのは便利かも？

半月ほど使用してみた感想

約半月使用してみました。

複数台のPCは使用しなかったので、スイッチングは試していません。

まず良かったところからまとめていきます

1ホイールがなめらか

買うときにも重視していたマウスホイールですが、なめらかでとても使いやすいです。

ホイール下のボタンを押すと、ラチェットモードとフリースピンを切り替えることができるので、作業によって使用感を変えられるのもよかったです。

フリースピンだと若干滑る感じがあるので、細かい作業ができる・・という訳ではないので注意

2戻る・進むボタン

安価なマウスでも備わってるマウスがちょこちょこありますが、サイドのボタンが２つあるので「戻る」「進む」のどちらもワンタッチなのが地味に嬉しい。

前回使ってたマウスは戻るボタンしかなかったので満足。

3充電しながら操作可能

購入時から無充電で半月ほど使ってますが、まだ電池切れてません。

なので、まだ使用中に電池切れそう！といった場面になっていませんが、充電中にも使えるか試してみました。

問題なくそのまま使えたので便利そうです。そもそも、最長70日使用可能なのであまり電池切れに遭遇することもなさそうです。

気が向いたら充電器差しておけば問題なし。

4Bluetoothもレシーバーワイヤレスも可能

Bluetoothでも使用可能なので、USBポートが少ないときや出張先でも使用が楽です。

個人的に良かった部分を抜粋するとこんな感じでした。

エルゴノミクス的な形状がフィットすれば、疲れにくく使いやすいマウスという評価です。

以下、気になった点もまとめます。導入のダルさは前項で書いたので省略します・・・

1ほこりが付きやすい

マウスの掌部分はラバー感触です。

個人的に、もう少しサラサラでも良かったのでは？と思いました。

確かにグリップ感は悪くないのですが、細かい埃が付いたら取れにくいのが気になります。神経質気味の人は気になるポイントかもしれません。

画像ギャラリーの写真も使用後のものなので少し埃が付いています・・

2ジェスチャボタンが固い

マウスの親指部分にはジェスチャボタンが付いていて、ジェスチャボタンを押しながら上下左右にマウスを動かすと、割り当てられた動作を行います。

Mizは前項の設定画面のようにメディアコントロールを割り当てていて、ボリュームの上下などができます。
そこまでは良いのですが、このボタンが微妙に押しづらいのが難点。

マウス側面にある戻る/進むボタンより推し心地が固い上に、押す方向が机に向かって垂直になるので、他のボタンよりも力が必要。

そのせいであまり使いません・・

3マウスの中では値段高め

１万円以下でも機能面でそこそこ優れたマウスがあるので、ブラウジング専用・ライトユーザーだとちょっと迷う値段ですね。

余談ですが、5000円以下だとこのマウスがおススメです。

戻る/進むボタンがある上に、PCのスイッチングもできる優れもの。質感は比べ物になりませんが・・

エレコム マウス Bluetooth (iOS対応) Lサイズ 5ボタン (戻る・進むボタン搭載)

MX Master 3まとめ

このマウスの利点をまとめると

駿河屋だと2021/08時点で12,000円なので最安値かもしれません。
PCハードアドバンスド ワイヤレスマウス MX Master 3 (ブラック)[MX2200sBK]

MX Master 3を検討している方の参考になれば幸いです。

Logicool　G813　詳細

USBポートやメディアコントロールがキーボード右上についています。

全体図。テンキー付きモデルなので結構横幅広め。

キーキャップは短めなので、タッチ感は軽め。普段ノートパソコン兼用の人に特におすすめです。

見た目がかなり美しい。

白モデルもあるのですが、無線タイプかつテンキーレスのみのモデルしかないのでこちらにしました。

デスク小さめ、ゲーム用途メインの方はテンキーレス一択です。

ドライバを入れてみる

Logicool G HUBというソフトウェアを使ってライトの色や光り方を制御できます。

効果のプルダウンから光り方、効果を選ぶと対応した色が選択可能。

色はカラーコードで細かく選べますが、キーボード自体の発色は「そんなに細かく変わってるかな？」という印象です。

それでも自由度はかなり高いので満足。

キーのクリック音や光り方の一例

簡単な動画を撮ってみました。

キー音載せたかったので、音は消してません。余計な音聞こえてないよな・・・？

1エコープレス

2色の波

3リップル

プリセットの効果は全部で９種類あります。

と、いう訳で、個人的にはかなり満足感の高いキーボードでした。

無線上位モデルのG913と１万円ほど価格が違うので、有線でもいい方はG813の方がコスパも良いでしょう。
迷ってる方の参考になれば幸いです。

Logicool G ロジクール G ゲーミングキーボード 有線 G813 薄型 GLスイッチ タクタイル メカニカル キーボード 日本語配列 LIGHTSYNC RGB USBパススルー G813-TC 国内正規品

まだまだ未熟なので、パスでうまいこと絵を描くのが苦手なのだが、今回新しいツールを使ってみたら自分のやりたいことにジャストフィットしたので、制作方法を備忘録として残しておきます。内容かなりあっさりしててすみません。

作ったもの

正方形のSNS用アイコン。

これ、昔から好きだった目の意匠を入れたのですが、ボールペンで30秒くらいかけて書き殴ったものをスマホで取り込んで、イラレで編集してみました。

イラレで編集するには、Captureアプリからシェイプとして撮影する必要があります。

シェイプにはパスも自動で割り当てられているので、修正も楽でした。（今回はほぼ修正無し）

カスみたいな落書きからは想像もつかないほどのそれっぽさに、私満足しています…

さいごに

というわけで、手書き取り込みのマーク＋フォント改変のロゴセットなどは、比較的安価で承ることができそうです（案出しの際の工数や修正などにより変動します）

実績はどんどんサイトに追加していくので、気になりましたらお気軽にご相談お待ちしてます。
相談の際は、お問い合わせフォームか公式LINEよりお願いいたします。

公式LINEに関する変更や追加依頼につきましては、お客様よりMizのアカウントを管理者として追加していただきます。

公式LINEのパスワード等をMizに知らせる事なく、安全な管理や運営が可能となります。

作業終了後、管理者権限を外すことでMizからのアカウントの操作も不可となりますのでご安心ください。

管理画面を開く

スマホアプリでの操作が簡単なので、おすすめです。

公式LINEアプリを使っていない方は、こちらのリンクよりアプリをダウンロードしてください。
（リンク先はGoogle、Apple共に公式のURLとなります）

アプリを起動すると、以下の画面が表示されます。

アカウントをお持ちでないお客様は、製作代行も致しますのでお気軽にお問合せくださいませ。

設定画面を開く

赤丸で囲った「設定」をタップします

権限情報を表示

「権限」をタップします
※お詫び：画像まちがえて赤丸付けたので、後程修正してアップします

メンバーを追加

権限所持者一覧が表示されますので「メンバーを追加」をタップしてください。

運用担当者を選択して、「URL発行」をタップします

料金表詳細はこちら

Mizも愛用のエックスサーバー、2021/5/6（木）18時まで、独自ドメイン永久無料＋初期費用０円キャンペーンをやっているようです。

実はMizも以前にこのキャンペーンを開催している時に始めました。

キャンペーン適応には年契約が必要になりますが、最初のうちは契約切らしておじゃん・・なんて事にならないためにも一括で払ってしまった方が安心です。

エックスサーバーで良かったところ

これはキャンペーン中の初期費用０等よりも明確におすすめ出来るところがあります。

ワードプレスの導入が非常に簡単

これに尽きます。

↑ワードプレスへの簡単インストール画面

ワードプレスの導入には、本来なら本体をインストールしたり、FTPソフトを使ってサーバにアップロードしたり・・・初心者にはハードルが高いです。

Mizも一度よくわからなくて断念しました・・・

ですが、その設定がなんのインストールも必要なしで上記画面を埋めるだけで初期設定が全て終わる神対応なんです！！

こんな方におすすめ

最近、店舗や大手サービスだけでなく、個人事業主の方や趣味サイトの運営をしている方もLINE公式アカウント（旧LINE＠）を運営されている方が増えてきましたね。

Mizの周りの個人経営をされている方もどんどん導入しています。

最近はメールマガジンもかなり廃れてきて、メールよりLINE派の方が多いのでブランディングには欠かせないツールだと思います。

皆さん意外とリッチメニュー設定していない問題

しかし、一つ気になる点があるのです。

皆さん、リッチメニューを設定していない・・・

これだと、せっかく興味を持ってくれたお客様がどこにレスポンスすればいいのか分からないだけでなく、ただの個人LINEと見た目が一緒なので、ブランディングとして不十分です。

そこで、ぜひ活用していただきたいのがLINEリッチメニューです。

お客様が公式LINEを登録したあとの動線をはっきりさせることができるので、LINE登録後のレスポンスがスムーズになることはもちろん、自身からLINEを送信したタイミングでお客様からの問い合わせや販売ページに遷移しやすくなるメリットもあります。

実際にご覧になりたい方は、MizのサンプルLINEを登録してみてください。

リッチメニューを設定する際に決める必要があるものは

この２つです。

コンテンツの量はともかくとして、一番悩むのが画像です。

上記の大きさでご自身で作れそうであれば、Illustratorなどを使ってしっかりと作ったほうが良いでしょう。

PCからであれば、アイコンを作って１枚ずつ適用できるほか、スマホアプリからだと簡素ですがテンプレート画像も用意されているので「習うより慣れろ」なタイプの方は一度作成手順まで設定を進めてみるといいかもしれません。

リッチメニューを設定してみよう

実際に設定するには、トークルーム管理＞リッチメニューを選択します。

右上の作成を選択してタイトルを入力します。
これは、自身で管理するときにつかうものなので、正直適当で構いません。

では、順番に解説していきます。

1表示設定をする

表示設定では、表示期間を設定する必要があります。
直近で変える予定がない・期間限定でメニューを変える予定がないという方は、数年先を設定しておけばまず問題ないでしょう・・（Mizは10年先で設定しています笑）

メニューバーのテキストは、メニューをお客様が非表示にした後に再表示するためのものです。
こだわりがなければ、特に変更する必要はありません。

メニューのデフォルト表示は、お客様がLINEのトーク画面を開いた際にメニューを自動表示するかどうかを設定することができます。

後述するテンプレートが大きい場合、普段のトーク内容が見えづらくなるため非表示にするのがよいでしょう。
（Mizの公式LINEはサンプルとしてお見せするために、大テンプレートで表示設定にしてあります）

2コンテンツ設定をする

実際に表示させるメニューの詳細設定をします。最大６つのメニューを設定することができるので、ご自身が表示させたいメニューの数に合わせて選んでください。

テンプレートを選択してから、画像を作成を押すとメニュー毎に画像を割り当てることができます。

この機能は現在PC版でしか使えないので、画像にこだわりたい方はこちらの機能を使うのがおすすめです！

3アクションを設定する

最後に、アクションの設定です。

タイプより設定したい項目を選択して、リンクであればURLを割り当て・ショップカードやクーポンであれば、設定してあるものを割り当てます。

一部、アクションラベルを設定する項目が出てきますので、設定したい方はお好みでどうぞ。
（設定すると音声読み上げに使用されます。未対応機種では、文字で表示されるので注意してください）

4リッチメニュー完成

これで、リッチメニューの設定は完了です。

設定自体は仕組みが変われば簡単にできるので、ぜひ活用してみてください。

一番の難所は画像作成です。有料画像や素材サイトなどを使用する場合は権利や規約に十分注意してください。

（勿論ですが、画像の無断転載は基本的に禁止されています）

画像を作るのが難しい方へ

Mizが画像作成を代行いたします！

オプションで記事内のリッチメニューの作成も承りますので、お気軽にご相談ください。
ご相談は公式LINEからどうぞ