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

参考にした資料

「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では、画像の状態を確認しながら画像を圧縮できるツールでした。

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

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

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

作ったもの

正方形の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からどうぞ