1.アートとウェブの相関関係・2.スマホメニューが突然消えた！ 2020年12月19日アドベントカレンダーの記事
＜前置き＞
前回の記事は昨年のアドベントカレンダーでした。日頃、お客様に「少しでも良いので更新を頻繁にしてください」と言っている言葉を自分に向けたいと思います。（反省）
＜1.アートとウェブの相関関係＞
絵を描いています
３年前からアート活動をしています。具体的には「鉛筆画・色鉛筆画・油絵」などです。
FBではそのような投稿ばかりしているので、「ちゃんと仕事しているの？」と聞かれますが、１日の大半は仕事をしていますので、ご安心ください。笑 自分、この仕事は大好きです。
アートの目的は？
ちょっとしたカットが描けるようにと始めた絵ですが、私の場合、単なる趣味としてアートを捉えていません。アート活動も媒体は違うものの、人の心を惹くもの、目を惹く事、集客が目的だったりします。アート活動もウェブの仕事の延長線上に繋がっているものと考えています。
絵から学んでいる事は？
絵を描く上で勉強になっているのは例えば以下のような事です。
・人の目に美しいと思える構成、バランス
・人の目に何かを感じさせる色構成や組み合わせ
・人の心にある感情をひき起こさせるビジュアル
ウェブサイト制作にも役立つアート感性
ウェブサイトの目的は、コンバージョンの達成だったり、認知度の向上だったり、サイトにより異なります。
キャッチコピーや文章におけるフォント、サイズ、色、文字の配置、また選定する写真やカット、レイアウト、サイト全体が醸し出す雰囲気、それら全てはアートな感性の上に成り立っていると思っています。
デザインには黄金比を利用すれば良いのでは？
絵には黄金比という物があったり、色には配色比率や色相黄金比なるものがあります。そしてそれはウェブサイト制作でも同じく利用されます。
ですが、それらの数値だけを信じ切っても、構成している物だったり、使う色だったりでバランスが不安定に感じたり、異なる印象を感じてしまったりもします。人の感じ方はとても繊細だからです。
全ての人や全ての場合に適用できる法則は無いと思っています。ですから絶えず追求し、研究していく姿勢が大切なのだと思っていて、アートの分野では実験と実際と効果という経験を蓄積しています。
違和感が時には注目や覚醒を引き起こす
例えばしっくりお互いが馴染む心地よい色の組み合わせがいつでも必ずベストなわけではないと思っています。
実はちょっと違和感を感じる色の組み合わせ、ちょっと目についてしまう色、そんな「購入ボタン」は購入ページでは案外目立ち、購入ボタン押下の役にたつ事があります。そのように黄金比でもケースによっては黄金比をわざと崩す事も有りなのかと感じています。
ものづくりの感性を磨き続ける
自分が描くだけではなく、たくさんのアート作品を拝見させてもらい、そこから感じるものを知見として蓄積し、様々な分野でアートの感性を磨き続けていきたいと思います。
世界の経営トップにアートな企業
世界を見渡すに、アート分野の企業がトップに君臨していたりします。例えばファンション業界のシャネル、エルメス、ドルチェ＆ガッパーナ、他たくさんのブランドなどです。これらは時代を超えて生き続ける会社です。そしてそのメイン要素はデザイン性（アートな感性）です。街はたくさんのデザイン、アートで溢れています。
アートが支配する世界
技術的な分野であれば、次から次へと技術革新が起き、追い越し追い越されの激しい主導権争いが起きていますが、デザイン・アートがその業種におけるメイン要素である場合、また違った戦いであったり、共存がある気がします。アートにおける支持は、りんごが好きか、みかんが好きかに通じる話だからです。
技術的な分野の最先端でも、人を惹き付けるには優れたデザイン性・アートな感性が必要です。
お財布を開かせる販売品は、たくさんの知見の上に成り立っているアートで、目に付くいたる所で展開されています。
そう考えると、どんなものを作り出すにしても、小さい事でも大きな事でも、人を対象にものづくりをしている限りは、アートこそ、最も生き続けられる重要なファクターなのでは無いかと感じています。
個展のお知らせ
そんなわけで、3年半にわたりアートに挑戦してきました。来年の夏、個展を開催します。
コロナが治まっていたら、奮闘ぶりを見にきてくださいね。
２０２１年８月２５日〜９月１３日（約３週間）
Fuji Manami FIRST EXHIBITION +謎の友情展示
〜 DAWN of REALISM 〜 リアリズムへの幕開け
＜2.スマホ時に三本線メニューが突然消えた＞
最近、iphone12に機種変更しました。そうした所、あるお客様のサイトでスマホ閲覧時に画面のメニュー３本線が消えているのに気付きました。その場所をタップすると、ちゃんとオフキャンバスメニューは開きます。そして別のお客様からも同様の指摘がありました。
消えてしまった３本線は、cssのフレームワークである、foundation5でアイコンメニューを作っているものでした。不思議な事は、PCではちゃんと表示され、テスト・ツールでも表示されるのですが、実機ですと消えてしまっています。
その三本線は、１つのspan要素に三箇所のbox-shadowをつけて三本線を表示させています。あれこれ実機を確認すると、iphone XRやiphone12で消えており、Androidoでは表示されていました。iphone全部のバージョンやAndroidoの様々な機種やブラウザで確認しておらず、原因は結局よくわかりませんでした。ですが、今後スマホでブラウザのバージョンアップを行うと同じような現象が出る可能性があります。
理由はともかく、三本線を出さないと誰もページに遷移できない事になってしまうので、spanを３つ置いて幅と高さを決めてbackground-colorで色をつけて表示するように改変しました。
管理サイトを調べた所、１３個のサイトでこのメニューが消える現象が起きていて、別のスクリプトで書き換えました。ついでに三本線の下に「MENU」の文字を付け足してあげたりして。
ドットネットの標準テーマでは、Public Organization、General Corporateが該当していました。（現在は修正済みです）
***********************************************
追記：2021.1.20
ドットネットの提供元、シックス・アパート様よりご連絡をいただき、標準テーマはすでに修正済みとの事です。
この件について、原因をお知らせいただきました。foundationで設定されたCSSとスマホ＆Safariの解釈が違う事が原因のようです。
修正方法は
a.menu-icon span {
の中へ height:0.05px; を入れるだけらしいです！
}
そうそう！こうゆう簡単な修正を見つけ出したかったのですが、この時点では自力ではできず全書きなおししたのです。流石のシックス・アパート社さん技術者さんです！お知らせいただきどうもありがとうございました。
不具合が出た場合はこの修正方法をご参照ください。簡単に修正できますね！
***********************************************
弊社では、こちらのサイトを参照させていただき、書き換えました。ありがとうございました。後ほどできたら書き換えスクリプトも載せます。