うきうき&備忘録part6
さあ、今週も備忘録を書き残すぞタイムがやってまいりました。
それでは早速れっつらごーーー！
うきうき
もうこの1週間はうきうきで最高に楽しみでした。「何が？」なんて野暮なこと聞く人はいないですよね？
そうです。プロ野球の開幕です！！！！！
我らが中日ドラゴンズは現在7年連続のBクラスです。ですが今年はとんでもなく私のなかでは期待値が高いです。
野手のレギュラー陣が固まり、けが人もいない。中継ぎの盤石な勝利リレーを形成できつつある。計算できる先発陣もコマが揃ってきている。
優勝しかないです！！！
そして今日。6/21(日)のヤクルト戦。未来の竜の大エース、梅津晃大（うめつ・こうだい）が7回無失点の最高なピッチング。8回ライデル・マルティネス、9回岡田俊哉と完封リレーでヤクルト打線を圧倒的に鎮圧。
打っては京田陽太の特大2ランホームラン。他打者陣もヒットを重ね、見事3−0で勝利！！！
こんな生活がこれから11月まで続くのか、、、最高すぎるプロ野球、、、
中日について書き始めたらとまらないので、このあたりでテンションを維持して備忘録入っちゃいます！！！！！
今週新しく学んだこと（分からなかったこと）
今まで3つずつと決めて投稿してきましたが、これからは書きたいだけ箇条書きで書いて行くことにします！
1つのブロックをながなが書いたら、自分があとから見直したときに結論がなかなか出てこなくて仕事の効率化も悪いと思うから、という理由で勝手ながらそうします！
今週から転職先でも仕事を任してもらえるようになってきたので、その仕事で使うスキルを優先的にピックアップしていきたいと思います！
ⅰ. デザイナーさんからもらったイラレデータの1部分を切り取ってpngデータとしてサイト上で使用します！！！
、、、めちゃくちゃ画質悪くなるやんけ、、これどうしたらええんや、、、
ⅱ. イラレやフォトショで書き出したファイルデータの容量を小さくするよ！どうやればよいのかな！！？？！？
ⅲ. サイト作成上、レスポンシブのブレイクポイントの設定が難しい、、、自分のPCでは表示がきれいにされるけど、先輩のPCでは表示が崩れちゃってる、、、どうすれば一番簡単に解決できるんやろ、、、
ⅳ. デザインデータで手っ取り早く背景を透明化させられる方法がある！？
ⅴ. デザインデータで手っ取り早く倍率を上げる方法がある！？
ⅵ. デザイナーさんからもらった画像データを切り取って、もとのサイトと同じように表示しなければいけない修正が入ったけど、CSSを余計に増やしたりしないように余白まで同じ大きさに切り取りしないといけないの、、、？これは運要素が強いやつか、、、？
以上！
後ろの席の先輩がめちゃくちゃ優しく、上記の課題も全部解決していただいたので、お師匠様と呼ばせてもらっています。笑
本当に環境最高や、、。ですが、お師匠に甘えすぎないために、同じ質問は二度としないことを意識して、全部吸収してやります！！！
そのための備忘録！ビバnote！！！笑
さあ解決方法を挙げていきます！
ⅰ. デザイナーさんからもらったイラレデータの1部分を切り取ってpngデータとしてサイト上で使用するぞ！！！
、、、めちゃくちゃ画質悪くなるやんけ、、これどうしたらええんや、、、
そうです。仕事として致命傷の、使う画像の画質の悪さ。これをどうやって解決したら良いのか、、、。色々調べましたが、調べ方が悪いのか即効性のある解決方法が見つかりません、、、。
ここで私はお師匠に泣きつきます。
yude「先輩、、、先輩はいつもこうゆうときどうやって画質良く書き出ししてるんですか、、、？お力をお貸し下さい、、、。」
お師匠「もちろんです。こういう時は助け合いです。」
神様かよ、、、。
そして教えていただいた解決方法がこちら。↓
・書き出すときに、200％の倍率に設定する。
これだけ！！！
すぐ解決しました。画質の良い画像が爆誕。
あとはちょこっとだけCSSを触れば、サイトでもきれいに見えます。本当にありがとうございますお師匠様、、、。
次！！！（ちなみにお師匠様フル出演です。乞うご期待。笑）
ⅱ. イラレやフォトショで書き出したファイルデータの容量を小さくするよ！どうやればよいのかな！！？？！？
ⅰ.を解決したときに、お師匠から「ついでだから」と教えていただいたことがあります。
それがこのサイト。↓↓↓
こいつに投入するだけで、データサイズを60％ほど小さくしてくれるスグレモノ！これからもお世話になります。よろしくお願いいたします。(土下座)
お師匠、ありがとうございます！お時間とらせてしまって申し訳ない、、、
次！！！
ⅲ. サイト作成上、レスポンシブのブレイクポイントの設定が難しい、、、自分のPCでは表示がきれいにされるけど、先輩のPCでは表示が崩れちゃってる、、、どうすれば一番簡単に解決できるんやろ、、、
お師匠とこんな会話がありました。
yude「先輩！修正完了しました！またお時間あるときに確認お願いしまーーーす！」
お師匠「分かりました。今見ちゃいますね。、、、あれ、ちょっとずれてますね〜。なるほど、そういうことですね、パパっと直しちゃいましょうか。」
神様かよ、、、。
自分は、このとき修正した画像の位置などを、CSSですべてpx（ピクセル）で設定していました。
なのでディスプレイのサイズの違いで、サイトのみえ方にズレが生じる場面がありました。
これを一発でなおす方法。それは、、、
・vw（Viewport Width）の設定
です！！！これで設定すれば、ディスプレイの大きさが違うからと言ってサイトのみえ方に問題が生じることはほぼ無くなるはずです！
実際に検証ツールで今のpxとvwが同じくらいにみえるように設定したら、先輩のPCでもきれいに表示されました！
ちなみに下記のサイトを少し参考にしています。
ありがとうお師匠、、、。実用的な仕事のやり方を端的に教えてくださる、、先輩の鑑だあなたは、、、。
次！！！
ⅳ. デザインデータで手っ取り早く背景を透明化させられる方法がある！？
これは簡単すぎる方法です。
・pngの後ろに32とつけてファイルデータを保存すればOK！
次！！！
ⅴ. デザインデータで手っ取り早く倍率を上げる方法がある！？
これも簡単すぎる方法です。
・ファイルデータの名前の先頭に、200とつけるだけ！
こうすることによって、200倍率のデータが保存されるので、結果的に画質が良くなります。ⅰ.でお師匠におしえてもらった方法の応用版ですね。
次！！！！
ⅵ. デザイナーさんからもらった画像データを切り取って、もとのサイトと同じように表示しなければいけない修正が入ったけど、CSSを余計に増やしたりしないように余白まで同じ大きさに切り取りしないといけないの、、、？これは運要素が強いやつか、、、？
これまた先輩は神様エピソードから。
（自分の文章能力が無いのと、仕事の関係上どこまで公にしていいのかわからないため、自分しか分からないような文章になっています、、悪しからずご了承ください、、。）
yude「先輩、、、今日中の修正依頼が入ってきて、こんな感じでやってみたんですが、元データのページと画像（部屋の間取り）がずれちゃいます。これをきれいにちゃんと元データとおなじように表示するには、どう加工すればよいのでしょうか、、、。知恵を貸していただけませんか、、、。（21:00頃）」
帰宅準備始めていたお師匠「ふむふむ。こんな時間に修正依頼とは、、、お客さんも横暴ですね、、、。困ったときは助け合い。ちゃっちゃと解決して、すぐ帰りましょうか！」
だからあなたは神様かよ、、、。
本当にものの見事に5分で解決してくれました、、、。
その方法がこちら。
①元データの画像ファイルを、新しい元データと同じサイズに切り取りたいフォトショデータにドラッグ・アンド・ドロップでぶち込む。
②ぶち込んだ画像データの不透明度を下げて、下にうつる切り取りたいフォトショデータと場所をあわせる。（同じ間取りの画像データだったため、ピタリとあわせることができた）
③commandキーをおしながら、ぶち込んだ画像データのサムネイル部分を選択する。（これで、ぶち込んだ画像データの選択範囲がコピーされる。）
④下にうつるフォトショデータを選択し、レイヤーマスクをかける。
こうすることで、フォトショデータの選択範囲が、新しくぶち込んだ画像データの範囲に変わり、同じサイズの画像として切り出す準備ができた。
⑤レイヤーマスクの名前を保存したい名前に変更し、ファイル ＞ 生成 ＞ アセット で画像データとして書き出し完了！
今週の備忘録終了！！
終わりに
お師匠、、、。本当にありがとうございます。
今週はあなたがいないと死んでいました。そしてこれからもあなたがいないと死んでしまいます。
同じ質問は二度としない。
この言葉を肝に命じて、お師匠から教えていただいたことはすべてその瞬間に自分のものにして、お師匠に、会社に貢献できるように頑張ります！
お師匠！これからもよろしくお願いいたします！
今週はここまで。来週からもお師匠めちゃくちゃでてくると思いますが、yudeのバカを見事に救ってくださるお師匠を楽しみにお待ち下さい。笑
ではまた！
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？