こんにちは、ダブルワーカーのよいこです。
怒涛の11月を乗り越えたと思ったら、師走に突入。残務処理とか山ほどあるのに・・・マズい・・(´Д`)。

久々の投稿は、パスクリ通信2018年12月7日号でご紹介した、PassClipの新機能「パスワード表示画面のデザインカスタマイズ」について、です。
パスクリ通信の記事を書くのに、画面サンプルを作ったついでに、せっかくだから、どんな画面がいいのか、ちょっと真剣に考えてみて、とりあえず色々と余計なデザインを作ってみたので、それをご紹介します。
写真を設定するだけではなく、背景画像データを自分で作れる人、という限定になってしまいますが、画面カスタマイズの参考にしていただければと思います。(あまり参考にはならないかもしれませんが)

ちなみにこの記事を読む前に、パスクリ通信の記事は必ず目を通しておいてくださいね。

デザインカスタマイズのポイント

デザインカスタマイズのポイントは2つ。
まず1つめは背景画像はスクエア(正方形)で作成する、ということです。
パスクリ通信にも書きましたが、読みこむ写真(画像データ)のトリミングやリサイズ的な機能がまだないので、画像の縦横比がかわらないようにするには、スクエアで画像を作るようにしましょう。72dpiで600 x 600ピクセルが実際のサイズになるので、それで作れば問題ありません。
iPhoneの場合は標準のカメラアプリで「スクエア写真」の撮影ができるので、それを使えば撮影後の加工は不要です。

次に一番大事なことですが、パスワード文字が現時点では、スミベタ(黒)しかない(時期バージョンアップでは白とかにもできるようになってほしいですね)ので、パスワードをはっきり見やすくするには、背景画像は明度を明るめにすることです。濃い色で作ってしまうと文字が見づらくなるか、もしくは文字の背景に白丸をある程度表示させないといけないので、そうすると背景画像が死んでしまいかねません。
背景画像に写真を使う場合でも、全体的に明るい写真ならいいのですが、濃淡両方あると濃色部分が見づらくなってしまいますので、注意が必要です。

上記2点が画像制作上のポイントになります。
あとは背景画像のまわりが白地なので、背景全部を画像にして角版で使うのではなく、白地の中に切り抜きで画像要素を入れる、というのもいいかもしれません。

ということで作ってみたサンプルを以下、アップしてみます。

デザインカスタマイズ例

まずはオーソドックスに角版写真から。ライムの写真ですが、明るめなのでパスワード文字の視認性はあまり悪くありません。それでもフォントはウエイトの太いフォントにしてありますが。
スクエアサイズの写真ではなく多少横幅の広い写真を使ったので、ライムはやや縦長になってしまっています。(さほど気にならない程度ですが)

こちらはスクエアでトリミングした風景写真です。風景写真は濃淡があるのが多いのですが、これくらい淡い感じだけだと、文字はかなり見やすいですね。

月の写真の背景(星空)を切り抜いて白地にしたものです。切り抜くとまた雰囲気が変わるという例です。
(ただの月なのであまり芸があるとは言えませんが・・・。)
月齢に応じて新月から、満月へと毎日変えていけば面白いかもしれませんが、まあ面倒なだけですし・・・

同じく写真の背景を切り抜いたクリームパスタの真俯瞰からの絵です。自分の得意料理とかの写真にするのは面白いかもしれません。ただし明るい色じゃないとダメなので、ビーフシチューなどの濃い色の料理は諦めて、明るい色の料理を作ってみましょう。
季節感がある食材も入れるほうがいいかもです。ということは、これからの寒い季節は鍋料理の写真ってことですか!!。雪見鍋とか・・・。でも大根おろしで真っ白じゃつまらないですが・・( ̄Д ̄;) 。

ちょっと上品に、タバコ会社っぽいですが・・・。
こういうのも悪くないかもしれません。正攻法な切り抜き写真の使い方と言えます。
まあ面白みにはかけますが、面白くないといけないわけじゃないですし・・・。

これはパスクリ通信の最後に使った画像のアレンジ版ですが、季節歳時を入れた画像を作って差し替えていくのもいいかもしれません。同じ画像ばっかりじゃ飽きるし。
なお、この画像のように、背景に文字が入っていても、背景文字色と背景色の明度が同じくらいに作ると、あまりパスワード文字は見づらくなりません。(これでもちょっとは考えて作ってる、っていうことで。)p(^_^)q

ぺんぎん君が出てきたので、モノトーンの漫画っぽくしてみました。全体的にハーフトーン位に白っぽくしてパスワード文字の視認性を確保しています。あえてカラーにしないで、こういうのも雰囲気があるかもしれません。

モノトーンじゃ味気ない!という方は、こんな風にカラフルに攻めるのもいいかもしれません。単純で芸はないですが、意外とお気に入りだったりして・・

マス目デザインでもこういう配色にすると、どこかで見たような・・・・
( ^ω^)b おお、カッティングボードじゃないですか!

ということでいろいろ作ってみましたが、ユニークネタを3発ご紹介します。

その1
これならパスワードわからんだろう!ということで紛らわしいパスワード文字を散りばめてみました。( ̄Д ̄;)
もちろん、自分で本当のパスワードを間違えてしまうと本末転倒なので、そこはちょっとだけ考えてあります。(そのへんのタネ明かしは言えませんが)

その2
パスワードを覚える必要がないと言っても、パターンを忘れたらダメ!
ということで、パスワードパターンを忘れないために、書いておきました。
エエ〜〜〜ッ!(°O°;)
もちろん、本物のパターン位置で作ったらダメですよ。そんなことする人はいないとは思いますが・・・・・

その3
手描きついでに、こんなのはどうです。レトロなアナログ感がいい感じ!パスワード文字も手描き風のフォントに変更してます。
まるばつゲームって本当は3マス X 3マスなんですが、あくまでも雰囲気ということで、そこは目をつぶって。
これ、やるなら、自分のパターンの一箇所くらいにバツを入れて、あえて文字を見ずらくするのがオススメですね。
いいなあ・・・これ!!(^_^)V


最後はウケ狙いではなく、色々作ってみて、ユニークさとデザイン性のバランスが一番いいかな、ということで今のところ一番のお気に入りを。
説明する必要はありませんね。世界的な有名ゲーム風のデザインなので、横から盗み見られてもパスワード管理アプリには見えずにゲームアプリにしか見えないでしょう。

なお、黒石を完全にスミベタにすると文字が全く見えなくなってしまうので、画像は黒で作り、設定画面の文字背景の丸の透過度で少し明るくグレーにしてあります。(サイズをちゃんと合わせて作らないとダメですが。)

さらにこのデザインだと、新規スロット追加などの際に「パターンを押す位置がわからない!」という問題もクリアしているので、現時点ではこれに落ち着きそうです。(でも飽きっぽいからまたすぐに変えそう・・・)


ということで色々作ってみましたが、皆さんも工夫してぶっ飛ぶクールなデザインでのカスタマイズにチャレンジしてください!!

番外編(オマケ)
パスワードが数字だけならこういうネタも。ご存知BINGOカードはちょうど5 X 5 マス! おお!\(^o^)/
真ん中のFREEがよく見えないのは残念ですが、これからのパーティーシーズンにはいいかもしれません。


最後にもひとつおまけです。
少し早いですが、
Merry Christmas and
Happy New Year!
ヽ(∀゚ )人(゚∀゚)人( ゚∀)ノ