image

Web Design
System
logo

わたしが、WEBデザインを仕事にした理由は、考えることが好きなのでクリエイティブな職に憧れていました。当時のWEB業界は先駆者が少なく、余地があると思い決断しました。そこからは、朝から朝まで、連日勉強して、パソコンにかじりついて、目から血が出るほど、頭から煙を出しながら、前髪が白髪に変わるくらい、とにかく実戦で役立つWEBコーディングを徹底的に学び検証して、記憶していきました。今では、デザインもシステムも両方できるデザイナーとして頼りにされていますが、当初はこれしかないと思って、理解できなかったらあと何もできないと思って、人生で一番集中して勉強・修練の時期だったと自負しています。実際、デザインとシステムと両方できるWEBデザイナーは少ないように感じます。なので、両方できるWEBデザイナーは需要が極めて高いです。

幼い頃から、負けん気がとても強かったわたしは、ややこしいWEBのソースコードに心が折れかけたことも幾度もありますが、あきらめたら成長できない、進めない、逃げるのか?次も困ったらまた逃げるのか?と自問自答しながら、脇道にそれず正面から壁を乗り越えるように心がけていました。コーディングを上達する必勝法は、出来るまで向き合うことです。夢の中でもソースコードが出てきて、翌朝トイレの中でソースコードが閃いて突破できる。なんてことが思い出としてあります。すぐ出来なくても、何度わからなくてもなかったことにせず、とにかく突破して次に進むを繰り返すことが上達につながると私は思います。そして、今日も仕事をしながらコーディング力は進歩していくことでしょう。

Web System Designer

松本 恵美 Emi Matsumoto

大分県出身。2012年〜フリーランスとしてウェブデザインに従事。2017年〜大阪市心斎橋の広告製作会社と契約。
関西・関東の案件を中心にウェブサイトのデザイン及びシステムコーディングを担当。女性媒体のデザインを多数製作。

I work on web design since 2012.
Become an employee of a production company in Osaka from 2017.
The web design of the female is produced.

最近おすすめのwebfont

皆さんもお使いのGoogle Fontsから、わたしが最近よく活用している英語書体を2つご紹介します。わたしは、htmlに記述せずにcssの方に記述しています。理由は、font変更をする時は、font-size(大きさ)やletter-spacing(文字幅)も調整しなおすと思うので、htmlとcssと2回開くより、cssで取りまとめていた方が手間が省けると思いますし、cssの場合だとwebfontを複数使用していても1つにまとめて記述が出来ますね。

html

<h3 class="copy">Web Design</h3>

Web Design

<h3 class="title">Google Fonts</h3>

Google Fonts

css

@import url('https://fonts.googleapis.com/css?family=Great+Vibes|Oswald:300,400,500,600,700');

h3.copy {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
font-weight: normal;
text-align: center;
letter-spacing: 0;
}

h3.title {
font-family: 'Oswald', sans-serif;
font-size: 2.3em;
font-weight: 700;
text-align: center;
letter-spacing: 0.13em;
}

FVのコピーや各ブロックのタイトルなどに活用しやすいwebfontのご紹介でした。
Google fonts https://fonts.google.com

ソース読取り一時対策

ウェブのソースコードは第三者も読み解くことが可能ですが、出来ることなら著作権を意思表示したいですよね。そんな時に使えるコードはこちらです。

html

<body oncontextmenu="return false" onselectstart="return false">

bodyタグに記述します。通常の右クリックを禁じます。さらに、ドラッグしてテキストのコピーも禁じます。私も常に使用していますが、こちらのサイトはコピペfree!

© EMI MATSUMOTO.