Oeco@Web

デザイン、Webについて勉強したことの記録です

Webデザイナーになって１ヶ月がたちました

こんにちは、おえこです。
Webデザイナー（アシスタント）になって１ヶ月がたちました。
１週間ごとに振り返ろうと思っていたのですが、想像以上に時間がとれず。。。
月イチで振り返れたらいいかなあと思っている今日このごろです。


この１ヶ月で取り組んだ仕事


・ブログのアイキャッチをつくる
・バナーをつくる
・LPのデザインする
・イラスト描く

とにかく、私にできそうなことは何でも
「やりたいです！」と手をあげることにしています。
言った直後は「やめとけばよかったかな。。。」と思いますが
今振り返ってみると何でも自信や経験になっています。

次にその仕事が来たときに、１回やったことあるっていうのが強い。


課題リスト


・デザインの基礎を学ぶ（グリッド、デザイン四原則、色の置き方etc...）
→とにかくトレースする
・デザインに意味をもたせ、言語化できるようになる
・いいものをたくさん見る！！

スピードが圧倒的に足りないのはもちろん、
デザインの知識や考え方などが浅いことを痛感しました。


デザインの基礎を学ぶ


Webデザインの基礎として、グリッドの使い方や
デザイン四原則（知ってはいるけど……）、色の置き方などについて
知識として身につける必要性を感じます。

“なんとなく”……ではダメで、
「なぜそこに要素を置いたのか」
「なぜその写真なのか」
「なぜそこに色を置いたのか」
などなど……すべてのレイアウトに意味があるデザインをしなければいけないです。


デザインに意味をもたせ、言語化できるようになる


LPを作ったときに、最初のコンセプトやターゲットの理解が曖昧だったので
後々のデザインがぶれてきてしまい、ボツになりました。

今までは独学でひとりで勉強していたので、コンセプトをふわっと考えて
なんとなーくそれっぽいものが出来上がる、という感じでした。

けれど、会社員になってクライアントがいるデザインとなると、
修正指示などが出て、自分の考えていなかったパターンで手を加えなければいけないときに
最初のコンセプトや、デザインそのものの目的に立ち返る必要があります。

修正指示が出ても、すべてそのまま直していると
最初に自分の考えていたレイアウトからどんどんずれてデザインが崩れてきます。

どこを直してどこはそのままにするのか、または別の方法で直すのか。
言われたとおりにしているだけじゃダメだし、
そのデザインを作ったのは自分なんだから、先輩に何を言われても
最終的には自分のデザインを信じたい。

そのためにも、コンセプトの確立、ターゲットへの理解がすごーーーく重要！！


いいものをたくさん見る！！



やはりこれに尽きる。
いいものを見てたくさん手を動かすしか、上達はないですね。
常にアンテナを張って自分のデザインに自信が持てるようになります！


総括



Webデザイナーになってから常にデザインのことを考えてるし、
土日も少しでも時間があればPCを開く生活。

本当に手が遅いので休日も仕事のデザインしてることがあります。

でも好きなことなので、ずーっと趣味のことしてるようなものなので
特に辛くはないです。

今でも自分がデザイナーと呼ばれたり、デザインチームのメンバーだったり
仕事でデザインしてるのがすごく不思議な感じです。
でも休みの日はやっぱり自分の勉強ができるように、
仕事は平日で終わらせたいですね！

ではまた頑張ってきますー！

【未経験から】Webデザイナーとして内定をもらうまで【独学で】

前職を退職してから約３ヶ月間の独学期間を経て、Web制作会社にWebデザイナー（初めはアシスタント）として採用していただくことができました。

転職活動中、「未経験からウェブデザイナーになるには！」というような記事を読み漁っていました。
すごく勇気づけられたので、私もこれから転職活動をする方のために書き残しておこうと思います。

続きを読む

【未解決】background-image でスマートフォンだけ隙間が空く

背景画像を用意し、コンテンツの背景画像として設定しました。 スマートフォン用に作った背景画像で、
小さい画像を縦方向にリピートしています。
コードは以下の通りです。
※スマホとPCで背景画像を変えているため、
　今回は@media screenを記述しています。
　検証環境はiphone XS の Safariです。 

@media screen and (max-width: 640px) {
    .concert-wrapper {
        display: block;
        background-image: url(images/qbackground.png);
        background-repeat: repeat-y;
        background-position: center;
        margin: 0px 20px;
    }
}


このコードだと、以下の画像のように背景に隙間が空きます。

f:id:newsk:20190704150128p:plain
背景画像の間に隙間


試したこと


background-size: contain を入れてみる

結果変わらず。

line-height: 0; を入れてみる

いろいろと調べていたところ、下記のページを発見。

意図せぬ謎の余白ができた時、余白を削除するために試してみるCSSNatsukiMemo なつきメモ

参考にして、line-height: 0;を入れてみると、、、
Chromeのデベロッパーツールでは改善された気がしましたが、
実際にiPhoneで見ると表示は変わらず。

【結果】2019/07/04、未解決……

今回、スマホ版の背景画像はliner-gradientで対応できましたので
そちらでコーディングすることにしました。
引き続き、解決しそうな方法を見つけ次第、試してみたいと思います。
（アドバイス等、ありましたらお願いしますmm）

Webページの背景に動画を設定するときの注意

Webページの背景に動画を設定しようとしたところ、
なぜか表示されませんでした。
調べてみると、こんな（↓）ページに行き着きました。

teratail.com


.movの形式だと、Safariでしか再生できないとのこと。
.mp4に変換してからでないとブラウザで再生できないらしいです。


動画素材サイトからDLしたら.mov形式だったので、
てっきりそのまま使えるかと思ってしまいました。


今回学んだこと

・Webページの背景に動画を使用する際は、.mp4形式で！
・動作確認は複数のブラウザで！
　（初歩的なことですが、、、反省します）

【初心者メモ】jQueryプラグインが動かなかったとき

こんにちは。Oecoです。
最近、jQueryプラグインに興味しんしんです。

簡単に実装できるし、何よりJavaScriptが全くわからない私でも
Webページに動きをつけることができる！
なんと素晴らしいんだ！！

……が、意気揚々とプラグインを読み込んだはいいものの
いざブラウザの読み込みボタンをポチっと押してみると
えっ……？ ピクリとも動いてない……
こんなことがしょっちゅうです。


そんなとき「ここを見ればいいんだよ〜」と教えてもらいましたので
メモとして残しておこうと思います。

続きを読む

夢を諦められなかった女の末路

改めて、はじめまして。

前回の投稿からかなり日にちが空いております。
といいますのも、実はあれからWebデザイナーではなく、
別の職種についたためです。

が、また……往生際が悪いのですが……
やっぱりWebデザイナーになりたい！
という想いを捨てきれず、再度挑戦することにしました。

このブログは、思い出の場所？　なので、学んだこと・感じたことなどを
書き残す場所として、再活用したいと思います。

再始動して初めての投稿なので、
先ほど完成したできたてほやほやの私のポートフォリオを
紹介させてください。

oeco.moo.jp

いろいろと調べながら、jQuery導入やレスポンシブ対応に力を入れました。
自分の持っている端末でしか動作確認ができなかったので、
他のいろいろな端末できちんと動いているか心配ですが……。

という感じで、ポートフォリオが完成した喜びで勢いで書いてしまいましたが、
本日は夜も遅いのでこれで失礼したいと思います。

また、これからよろしくお願いします。