webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

外国人から見た日本の風景を考える。『ネオ和風』ロゴを作ってみた:webサイト制作

昨日は学校がお休みだったので、学校のみんなで集まって午後からお勉強会をしてました。各々自分で好きなことをやる自由スタイルで。

 
最近授業がjQueryに入ったので、ひたすら問題を解いてみたり。
自分でクライアントを見つけてwebサイト制作をするので、プレゼン資料を作ったり。
 
私は『和柄屋』という甚平・和柄プリントTシャツ・和小物を卸売しているところのサイトを作ることになりました。
 

和柄屋』さんの通販ページ (今回のクライアント)

 

…という訳で

和風だけど和風すぎない『ネオ和風』ロゴ11個!

昨日のお勉強会、4時間の集大成です。
 
和柄屋』サイトの雰囲気をまとめる為にもと、ロゴをつくってみました。
 

f:id:serinaishii:20150822124509p:plain

 
『のれん』をイメージしたり
『WA(和)』の文字を、刀でスパッと切ったようにカスタマイズしたり
『A』を富士山に見立てたり
 
ちゃんと見る人に伝わるかな。
 
 
サイト自体のイメージが
  • 純和風でなく洋風なサイト
  • クリアなイメージ
  • 商品が映えるようシンプルに
…という作りを想定しているのでコッテコテの『和』でなく、『外国人さんから見た日本 = ネオ和風』をイメージしました。

外国人から見た日本の風景 『ネオ和風』

外国人の方々が日本で撮った写真や動画って、日本人が撮るそれと違ってなんとなくスタイリッシュでクールな感じがしませんか?
 
私はこのカッコイイ感じの日本風を『ネオ和風』と呼ぶことにしました。
ネオ(Neo)とはギリシア語で「新しい」という意味です。
 
 

外国人の視点で捉えた『日本』映像が秀逸すぎる!!

 

 
 

Our Japan

 

 
 

日本の美しい風景の写真をいろいろ撮ってきた

 

View post on imgur.com

imgur.com

 

私が再現できているかはわからないけど、目指しているのはそんな感じ。
 
このサイト制作を通して『和柄 -WAGARA- 』という言葉を、『おもてなし -OMOTENASHI- 』や『寿司 -SUSHI- 』のように外国の方にも伝わる日本語にしたいと思っています。
 
夢はでっかく。

ロゴをデザインするときの8つのルール

ロゴデザインに関していい記事を見つけたので引用しておきます。

 

ロゴをデザインするときの8つのルール

 

 http://blog.creamu.com/mt/2010/09/8_2.html

 

  1. より少ない色、より少ないフォント
  2. 一般的なフォントを使う。ArialやTimes New Romans、Helveticaなど
  3. シンプルな形が美しい
  4. ハイライトやグラデーション、シャドウを使わない
  5. 美しいロゴは、どんなメディアで使われても美しい
  6. 白黒でも美しく見えるのがよいロゴ
  7. メッセージを伝えるために、シンプルな構成がマスト
  8. 覚えやすいロゴにすべき。ナイキやコカコーラ、オリンピックのロゴなど

 

 色々な場で活用することを考えて、"グラフィックとして格好良く"よりも"シンプルで使いやすく"が基本ですね。
 
グラデーション・シャドウなどの立体的なデザインは、単色で表現できないのでNG。
 
これはwebだけで考えるとやりがちだけど、名刺やポスターとして印刷しようとすると使いにくいのでお気を付けあそばせ。
 
シンプルが1番格好良くて、1番難しいです。

奥多摩 御岳山に登ってきた!都会のオアシス、東京にいながら自然を満喫!

高雄山の次はここ!新宿から1時間ちょっとで行ける東京のオアシス御岳山(みたけさん)に登ろう!!

 

ということで、先月 富士山に登ったのがきっかけですっかり山の魅力に取り憑かれ、近辺の山々を制覇していくことになりました。
 
f:id:serinaishii:20150817234319j:plain
 
御岳山(標高 929m)はケーブルカーでも行き来でき、本気で山登りしたい人も気軽に山の雰囲気を楽しみたい人も、老若男女誰でも楽しめる山です。
 
日本二百名山(東京唯一!)』『花の百名山』と言われる大岳山(標高 1,266m)と、『つるつる温泉』がある日の出山(標高 902m)に囲まれている為、それぞれの山を通して様々な楽しみ方ができます。

御岳山の登山スケジュール

  • 日程   : 2015年08月15日(土)
  • 天候   : 晴れ (前日に雨)
  • 場所   : 東京都青梅市 御岳山(標高929m)
  • 所要時間 : 9時間 (登り:3時間、降り:ケーブルカー)
  • 難易度  : ★☆☆
  • 費用   : 1,350円 (バス往復、ケーブルカー片道)
 
08:00 電車を降車 / 武蔵五日市駅(むさしいつかいち)
 
08:20 バスに乗車 / 上養沢(かみようざわ)行き
    ↓ 約30分 (480円)
08:50 バスを降車 / 上養沢
 
09:10 登山道の入り口に到着
    ↓ 約3時間
10:50 日の出山 山頂(標高900m)に到着
 
    [ --- お昼休憩 --- ]
 
11:30 日の出山 山頂出発
    ↓ 約45分
12:15 御岳山表参道に到着
 
    [ --- 御岳山 表参道散策 --- ]
 
13:00 ロックガーデン周りへ出発
    ↓ 約2時間半
15:30 ロックガーデン周り終了
 
    [ --- 御岳山 表参道散策 --- ]
 
16:25 ケーブルカーに乗車 / 御岳山駅
    ↓ 約20分 (590円)
16:45 ケーブルカーを降車 / 滝沢駅
 
16:50 バスに乗車 / 御岳駅行き
    ↓ 約5分 (280円)
16:55 バスを降車 / 御岳駅前

 

休憩もとりつつなので、実質登っていたのは6-7時間ってところでしょうか?

 

私たちはそこそこゆっくり歩きながらいくタイプなので、もっとチャキチャキ行く人たちはペースアップ気味に考えてください。

 

それでは、写真とともに御岳山の自然をご紹介していこうと思います。


 御岳山の登山レポート

武蔵五日市駅(むさしいつかいち)で下車

新宿駅から電車で1時間15分、電車賃は1,000円程度。
今まで気付かなかったけど、奥多摩ってとっても気軽に行けるところなんです!

 

下調べをして、早起きして電車に乗り込み、御岳山駅で降りようと思っていたのですが、電車を間違えて武蔵五日市駅で気付きました。

 

出だしが肝心なのに…

 

御岳山駅まで戻っていたら1時間かかるみたいなので、そのまま武蔵五日市駅から御岳山までの行き方を探すことに!

 

f:id:serinaishii:20150819170754j:plain

 

西東京バスという少し小さめなバスに乗って、『上養沢』というところで降りたらどうやら登れるらしい。


上養沢(かみようざわ)でバスを降りる

『上養沢』でバスを降りたのは私たち2人だけ。
 
メジャーなのは1つ手前の『大岳山鍾乳洞』前で降りて、鍾乳洞を見学してから登山するコースのようです。
 

f:id:serinaishii:20150819170847j:plain

 
さて、上養沢でバスを降りて20分、歩けども歩けども登山道はみつからず…民家がたまにあるくらい。
 
携帯の電波も通じないし、通行人はいないしで不安になりながら前へ進みます。
 

f:id:serinaishii:20150819170857j:plain

 
もう引き返そうかと思ったところで、ふと右端に木の看板が現れました。どうやらここから登れば御岳山に着きそうです。

東京とは思えないような雄大な自然!!

f:id:serinaishii:20150817234354j:plain

 

本当にここは東京なのかと疑いたくなるような大自然!

鬱蒼と生い茂る緑に、見たこともないような形の色鮮やかな虫たち。

 

やっぱり、毎日パソコンとにらめっこしてるだけじゃダメなんだなぁ人って。

 

こういうところに来るとジブリ映画で頭が埋め尽くされる不思議。トトロもナウシカもののけ姫も、みんなみんな今日のBGMにピッタリなのです。

 

わくわくする反面、いつクマさんに遭遇するかとヒヤヒヤしながら、できるだけ話したり歌ったりしながら登ります。

 f:id:serinaishii:20150819164432j:plain

 

石切り場のようなところもいくつかありました。

 

f:id:serinaishii:20150819164336j:plain

 

緩やかな道が少なく、ひたすらに登り登りでちょっとキツい道でした。きちんとペースを考えて登りたいところ。

 f:id:serinaishii:20150819164249j:plain

 

途中『養沢鍾乳洞』という看板を見かけましたが、何年も前に閉鎖したような跡地が残されているだけでした。

 

大岳鍾乳洞を諦めて、この養沢鍾乳洞に寄ってみようと考えていたのでちょっと残念。

 

f:id:serinaishii:20150817234439j:plain

 

登り始めて1時間と少し。

いきなり開けた場所にたどり着きました。

 

前日の雨でジメジメした山道とはうって変わって、お日様カンカンのスカッとした空気と、気持ちいい見晴らし。

 

f:id:serinaishii:20150817234427j:plain

 

道中は誰ともすれ違うことなく来たのですが、どうやら人があまり通らないだけにクマによく遭遇する道だったよう…

 

残念ですが、お会いできなくて光栄でございました!

 

f:id:serinaishii:20150817234529j:plain

 

御岳山のお隣にある日の出山への道。

 

日の出山のふもとをぐるっと周り、山頂を通らないで御岳山に行くこともできると、通りすがりのおばあちゃんに教えてもらいました。

 

ここでやっと第一山人発見です。本当に人っ子ひとりすれ違わない。

 

この辺りが色々な場所への分岐点で、御岳山とは反対側へ行くと『つるつる温泉』というなんとも可愛らしい名前の温泉にたどり着けるそう。


日の出山の山頂に到着

f:id:serinaishii:20150819164749j:plain

f:id:serinaishii:20150817234454j:plain

 
そんなこんなで、登り始めて約3時間。
 
御岳山と連なっている『日の出山』の山頂に着きました。標高は902m。
 
長いすに座ってお昼休憩をとります。
 
自然の空気をたくさん吸い込んだ後のおにぎりは最高に美味しい!!
 

f:id:serinaishii:20150817234557j:plain

 

私たちが登って来た道は『関東ふれあいの道』という名前がついていました。一応、一般的な山道を通ってきたようです。

 

そして、この辺りにきてやっと1ヶ所お手洗いがありました。


日の出山に別れを告げ、目指すは御岳山!

さて、休憩したら今度は日の出山をくだって、御岳山を目指します。

 

f:id:serinaishii:20150817234605j:plain

 

 途中、ナイスな倒木のイスがあったり。

 

f:id:serinaishii:20150817234632j:plain

 

さっきまでの"the 大自然"はどこへやら…いきなりお宿や民家、車に電柱まで出てきたり。

山道がコンクリートやタイル張りになってきたり。

 

本当に標高1,000mもあるの?と疑いたくなるような風景が広がります。

 

自然を満喫したくて登山を楽しみに来た私たちは少しガッカリ…


休憩もお土産もここで!御岳山の表参道

f:id:serinaishii:20150817234700j:plain 

50mくらいの場所にところ狭しとお店が並ぶ『表参道』

 

やっとお水が買える…!!冷たいお水が好きなだけ飲めるって素晴らしいことなんだと改めて実感します。

 

『亀屋』というお店に入り、店主おすすめのわらび餅を食べながらひと休み。

 

程よいもちもちさ加減で、疲れているから尚のこと甘いものの美味しさが身にしみます。

 f:id:serinaishii:20150817234652j:plain

 

御岳山の案内図がありました。

 

下調べ不足だっただけだけど、民宿おおいっ!!なんか栄えてるじゃありませんか。御岳山ってこんなところだったんだ!!


ロックガーデン巡り

ひと休みして元気になったところで、一周約2時間半のロックガーデン巡りをすることに。
 

f:id:serinaishii:20150817234708j:plain

 

七代(ななよ)の滝と綾宏(あやひろ)の滝という2つの滝が名物のようですが、正直なところ…んー見る価値はないかも。

 

小さな小さな滝で、来てよかったねー!って感じではありません。

 

特に七代の滝は、行きも帰りも長い長い急勾配な階段の先にあるので、足腰にかなり負担がかかります…飛ばしすぎないようにマイペースに行きましょう!

 

f:id:serinaishii:20150817234719j:plain

 

ロックガーデンの案内図がありました。

 

私たちは

[ 七代の滝 ] → [ 天狗岩 ] → [ ロックガーデン(岩石園) ]→[ 綾広の滝 ] → [ 平坦な山道 ]

と周って戻ってくるコースにしました。

 

逆周りもできますが、歩き疲れた最後の最後に階段をひたすら登ることになるのでおすすめしません。

 

七代の滝がどうしても見たいのでなければ、ケーブルカー側からロックガーデンに入る際に"向かって左側の道"を通ったほうが良さそうです。くだり階段続きなので、腰に負担がかからないようご注意を!!

 

f:id:serinaishii:20150817234714j:plain

 

そして、『天狗岩(てんぐいわ)』という天狗が空を向いた横顔のような形の岩を過ぎ、少し歩くとロックガーデンにたどり着きます。

 

チョロチョロと流れる川の上を、飛び石を渡りながら進んでいきます。クロックス履いてる方もいたけど、つるつる滑って危なそう。

 

石の上を歩いて渡るなんて、映画かゲームの世界でしか見たことない!童心にかえってうきうきが止まりません!!

 

f:id:serinaishii:20150817234724j:plain

 

岩に苔に川に!どこかにもののけ姫のコダマがいそうな気がしませんか?

夏なのに涼しく、川のせせらぎが心地よいとても素敵な場所でした。

 

きっと家にいたら、今頃クーラーづけ&パソコンづけの不健康な日常を送っていたかと思うと…御岳山に来て良かったと心から思いました。

 

帰りはどこまでも続く平坦な山道です。目ぼしいものはあまりありませんが…逆周りをして階段をひたすら登るよりはずっとマシ!

 


表参道でほっと一息

f:id:serinaishii:20150819171643j:plain
 
2時間半のロックガーデン巡りを終え、『表参道』でひと休み。山の水を使ったというかき氷を食べました。
 
氷がふわふわでサクサク食べられちゃう。サービスで出してくれた佃煮がまた美味しい!せっかくなので、おかか生姜をお土産に買って帰りました。

ケーブルカーもあった!

f:id:serinaishii:20150817234727j:plain
 
6,7時間歩き回って、下山するには疲れていたので『ケーブルカー』で帰ることに。
 
行きも帰りもケーブルカーを使えば、ショッピングモールに行くくらいな気持ちで御岳山に登ることができちゃいますね!
 
そういえば私たちみたいに『登山するぞー!』って重装備な人もいれば、近くのコンビニに来たくらいな軽装の人もいました。
 
自分がどの程度の山遊びを期待するかで、色々な楽しみ方ができそうです。

心残りは『生涯青春の湯 つるつる温泉』

本当は温泉に入って帰ろうと思ったのですが、時間がなくて諦めました。
 

日の出山にある『生涯青春の湯 つるつる温泉』

 

 

 
語呂がよくて何度も言いたくなっちゃう。つるつる温泉!つるつる温泉!次は絶対にチャレンジします!
 
因みに、つるつる温泉からは『武蔵五日市駅』までバスがでているそうなので、山登りの疲れを癒して帰るのにもってこいな場所ですね。

御岳山モデルコース3パターン

私が通ったコースも山あり谷あり、変化に富んでいてとても楽しかったのですが、御岳山は2回・3回と来ても面白そうなところです。

 

ということで、今回とはまた違ったコースをご紹介して終わりといたします。

 

----

1.初心者向け:ロックガーデンを周ろう(★★☆☆☆ )

御岳山|山ガールのための山歩きガイド

 御岳駅

 ↓

バスで御岳山のふもとへ

 ↓

ケーブルカーで山頂へ

 ↓

御岳山 表参道

 ↓

ロックガーデン巡り

 ↓

ケーブルカーで山のふもとへ

 ↓

バスで駅へ

 ↓

御岳駅

 

 ----

2.中級者向け:ハイキングがてら『つるつる温泉』に行こう(★★★☆☆ )

御岳山から日の出山~つるつる温泉ハイキングのコースガイド

 

 http://www.geocities.jp/hmrmyamada/yamaaruki/hinodeyama20121103.html

 御岳駅

 ↓

バスで御岳山のふもとへ

 ↓

ケーブルカーで山頂へ

 ↓

御岳山 表参道

 ↓

日の出山 山頂

 ↓

つるつる温泉

 ↓

バス

 ↓

武蔵五日市駅

 ----

3.上級者向け:大岳山も!大岳鍾乳洞も!がっつり楽しむ(★★★★☆ )

奥多摩ハイキング(御岳山~大岳山~大岳鍾乳洞)

 御岳駅

 ↓

バスで御岳山のふもとへ

 ↓

ケーブルカーで山頂へ

 ↓

御岳山 表参道

 ↓

長尾平分岐

 ↓

大岳山荘

 ↓

大岳山 大滝

 ↓

バス

 ↓

武蔵五日市駅


御岳山の紅葉を見に行きたい!

最後になりましたが、御岳山は秋の紅葉の時期に行くのが1番楽しそうです!

 

かき氷屋のおばちゃん曰く『紅葉が見たかったら、11月10日』においで!と日付指定で教えていただいたので、またその頃に今度は別のルートで遊びに行こうと思います。

画像圧縮・軽量化サイト3選!見た目そのままでファイルサイズ大幅ダウン!

webサイト作成時やバナー納品時、画像サイズが大きいと送るほうもなんか悪いし、受け取るほうも負担になるしで困っちゃいますよね。

 

1つ言えることは、画像も人間もおデブちゃんよりはダイエットしたほうがカッコイイってことです!


クライアントに納品する前に、やっておきたい画像軽量化!

 

そんなこんなで、今回は画像の見た目はそのままで、ファイルサイズだけダウンしてくれるwebサービスを3つご紹介します。

 

どのサイトさんもオンラインで完結!アプリケーションのダウンロードが不要なので、お手軽簡単です!ぜひお試しあれ!

 

軽量化手順

  1. 黄色い枠で囲んだエリアに画像をドラッグ&ドロップする
  2. 各サイト所定のボタンを押してダウンロードする

手順はたったの2ステップ!準備はOKですね?それでは参りましょう!


画像圧縮・軽量化サイト3選

Tiny PNG(タイニーピング)

f:id:serinaishii:20150817222353p:plain

パンダのマスコットキャラクターが気持ち悪いとか、一周回ってかわいいとか諸説ありますが、とりあえず私が一番お世話になっているサイトさんです。

 

png』と名前がついていますが、png形式の画像だけでなく、jpg形式も圧縮してくれます。

 

画像は同時に20枚までアップロードができます!パンダちゃんなだけあって器がデカい!

 

圧縮後のファイル名も余計な編集がされないので、とても使い勝手のよいサイトです。

(『sample.png』→『s_sample.png』などにファイル名を変更しない、ということです!)


 JPEG mini (ジェイペグ ミニ)

f:id:serinaishii:20150817222409p:plain

f:id:serinaishii:20150817222416p:plain

ほとんど画質を落とさずにファイル容量を8割くらいダウンできるお利口さんサイトです。

 

TOPのサンプル画像を見てもわかるように、圧縮前後の写真を比べてもほとんど遜色ありませんね。素人目には全くわからないくらいです。

 

ただ、このサイトの欠点は1枚ずつしかアップロードができないこと。

 

どうやらプロのデザイナーさん方はオンラインではなく、ソフトをDLしてお使いになるもよう。無料版は20枚/日の処理制限つきで、有料版は2,400円(2015年8月17日現在)で制限なし。気になる方は調べてみてください。

 

軽量化前後の画質について詳しく比較してくださっているサイトさんを見つけたので、よければ併せてご覧ください。


small pdf(スモール ピーディーエフ) 

f:id:serinaishii:20150817222424p:plain

最後に、こちらは画像…と分類してよいのか迷いましたが、『PDF』を軽量化してくれるサイトさんです!

 

事務職をやっているときなんかは、本当に本当にお世話になりました。そして、サイトがシンプルでかわいいのも個人的にポイント高いです♪

 

私が使っていたのはこの圧縮機能ですが、サービスは多種多様!!!

  • PDF 圧縮
  • JPEG PDF 変換
  • PDF JPEG 変換
  • PDF Office(Excel・Word・Power Point) 変換
  • Office(Excel・Word・Power Point) PDF 変換
  • PDF 結合
  • PDF分割
  • PDF パスワード 解除

使い方次第で色々なことができそうですね!


さて、明日からすぐに使える画像の圧縮サイトさん達をご紹介してきました。

 

『Tiny PNG』さんなんかはサイト名を忘れてしまっても

 

      『パンダ 画像 圧縮』

 

で調べればすぐに出てくるので、あのパンダちゃんだけでもぜひ覚えて帰ってください(*^^*)

映画をオーケストラの生演奏で!Disney in コンサート『ナイトメアー・ビフォア・クリスマス』

f:id:serinaishii:20150810113817j:plain

“ディズニー・イン・コンサート”とは

ディズニー映画全編を大スクリーンに映し出し、生演奏の音楽で鑑賞する、というとっても贅沢なコンサート! 作中の音楽部分はすべて、総勢100名以上のオーケストラとコーラスの生演奏で堪能することができます。

 

今回は映画監督のティム・バートン(本作は制作で携わっています)と、作曲家のダニー・エルフマンがタッグを組んだ「ナイトメアー・ビフォア・クリスマス」と「アリス・イン・ワンダーランド」の2作品が上映されました。

 

Disney in コンサート オフィシャルサイト

 

 http://www.disney.co.jp/eventlive/inconcert.html


作曲家ダニー・エルフマンが直々に歌声を披露!

大好きな『Nightmare Before Christmas』 全編をオーケストラの生演奏で鑑賞する『ディズニー・イン・コンサート』に行ってきました。

 

国際フォーラムの1番大きなホールで、S席の前から14列目!真ん中よりのとてもいい席でチケットがとれました!オーケストラ・コーラスの皆さんとの距離がとても近くて感動もひとしお。

 

f:id:serinaishii:20150810132122j:plain

 

作詞・作曲と作中でジャック・スケリントンの歌声を務めたダニー・エルフマンが直々に歌声を披露してくれました!実は、彼が歌ってくれるということを当日まで知りませんでした…(笑)

 

いつも映画で聴いていたジャックの歌の主が目の前で歌ってくれているなんて…感極まりまくりです!作曲家さんなのに見る人を楽しませるエンターテイナーっぷりが凄まじい!歌声もさながら、表情やパフォーマンスも含めて"キング・オブ・パンプキン"そのものでした!

 

男女4人のコーラスさんも個性豊かで歌声もしぐさもお茶目でとってもキュート! 

 

幕間に演奏してくださったヴァイオリニストのサンディ・キャメロンも圧倒的なパフォーマンス力でガンガンに引き込まれました。演奏していない時のちょこちょこした動きもすごく可愛かったです。

 

ティム・バートンダニー・エルフマン映画音楽コンサート サンディ・キャメロンの圧倒的パフォーマンス!

 

 (↑こちらは今回の演奏でなく、昨年のコンサートのものです!)

 

休憩も挟んで2時間半にわたる映画上映がすべて終わり、ホール全体から拍手喝采!今までの人生、スタンディングオベーションが起こるような場に居合わせたことがなかったのでびっくり!

 

エルフマンが最後にアンコールまでしてくれて、感動の余韻が残るなか舞台が幕を閉じました。最高のひととき…感無量です!!


Disney in コンサート 関連動画

8月に来日!ダニー・エルフマンが歌う!「ナイトメアー・ビフォア・クリスマス

 

 

ダニー・エルフマンから日本のファンへ熱いメッセージ到着

 


作曲家ダニー・エルフマンが明かす秘話

ダニー・エルフマンのジャック・スケリントンはこうやって生まれた!

 

 

公開された映像で、エルフマンは「『ナイトメアー・ビフォア・クリスマス』はもっともエキサイティングで思い出深い作品ですね」と語り、「映画を作っている、仕事をしているというより楽しく遊んでいる感じだったのです」と回想。

 

また、主人公ジャック・スケリントンの歌を自身が担当したいと思っていたが言い出せずにいたところ、バートンの方からオファーをしてくれたという秘話を明かしている。

natalie.mu


 先行予約特典・チケットも素敵!

今回「ナイトメアー・ビフォア・クリスマス」と「アリス・イン・ワンダーランド」の2作品の公演があり、それぞれ上映回によってチケットの絵柄が違いました。

 

私は8/8(土)公演の黒いチケットをチョイス。ついつい自分好みのチケットで上映時間を選んでしまいました!

 

f:id:serinaishii:20150810130603p:plain

HTML/CSS初心者のコードミスを探せ!googleデベロッパーツールの使い方

初心者さんにあるあるなコードの記載ミス。

 
あれが足りない、これが足りない、英語の綴りミスで動かない…
 
コーディングを初めて、1番最初にぶち当たる壁はまずこれです。
 
お勉強したてほやほやの頭で書くから、どこに何が必要なのかごちゃごちゃになっちゃうんですよね(´・ω・`)

初心者お助け!google developerツール

そんな時にとっても役立つのがこれ!

Google Chrome Developer Tool

  - グーグル クロム デベロッパツール
 

f:id:serinaishii:20150903231303p:plain

 
developerは開発のこと。つまりプログラムを書いて、システムを開発するときの為のツールです。
 
自分が書いたコードを要素検証して、正しくマークアップできているか、正しくスタイルが反映されているかなどを確認することができます。

ブラウザの準備

 
今回使う『Google Chrome』はMacにもWindowsにも標準装備されていないブラウザなので、初めてChromeを使う方はダウンロードする必要があります。
 

標準ブラウザ

 

www.google.co.jp

 

特にアドオンなどを別途で入れる必要はありません。DLしたら次へ!


google developerツールの使い方

まずは、デベロッパツールの起動方法、次に要素検証に使うツールを簡単に説明していきます。

 

----

1. 起動方法

ツールバーからも起動できますが、『F12』キーを押すのが一番早いかなと思います!ボタン1つなのでぜひ覚えてください。

 

f:id:serinaishii:20150903231311p:plain

 

1. ツールバー

  1. Google Chromeの設定』(ブラウザ右上の三本線ボタン)
  2. 『その他のツール
  3. デベロッパツール

 

2. ショートカットキー

  • 『F12』(ファンクションキーの12)
  • Windowsの場合: 『Ctrl』+『Shift』+『i』
  • Macの場合: 『option』+『command』+『i』

 

3. 右クリック

  • ブラウザ上で右クリック→『要素を検証』

2. 基本操作

さて、無事にデベロッパツールが起動できたところで、早速使い方をご紹介しましょう!

 

f:id:serinaishii:20150903231317p:plain

 

デベロッパツール基本操作

  1.  デベロッパツールの左上: 虫メガネボタンをクリック
  2. ブラウザ上: 検証したい要素(オブジェクト)をクリック

 

基本的な操作はたったのこれだけ!!

 

すると、デベロッパツール側で選択したオブジェクトのコードやスタイルが見えるようになります。

 

コードを確認する場所

  • HTML: 画面の左側 / Elementsタブ
  • CSS: 画面の右側 / Stylesタブ

3. 検証方法 - ボックスモデル

f:id:serinaishii:20150903231323p:plain

 

検証の仕方

  1. 検証したいオブジェクトを選択する
  2. デベロッパツールCSS側を下にスクロールする
  3. ボックスモデルが出てくる

 

個人的に、このボックスモデルの検証は1番よく使います!

 

サイトのデザインにもよりますが、margin・paddingは見えにくい要素です。・・・ということは、レイアウトミスが起きやすい要素でもあります。

 

なので、初心者ほどChromeデベロッパツールでよく確認しましょう!


コードミスを探せ!

冒頭でもふれたように初心者さんあるあるなスペルミス!!!まさに天敵ですね!

 

今回はよくあるコードミス2パターンについて書いてみました。

 

----

1. 綴りミス・スペルミス

さて、デベロッパツールで自分が書いたコードを確認してみましょう。HTML・CSSともにそれぞれの要素に色がついているのがわかるかと思います。

 

f:id:serinaishii:20150903231740p:plain

 

1. 要素名の綴りミス

  • 画像のように『注意マーク』が出る
  • 要素に色がつかない

・・・という現象が起きるので、ひたすらソースとにらめっこするよりもグッと簡単に間違いを見つけることができます。

 

2. id名・class名の綴りミス

 

id名・class名は、人間が任意で決めた名前なので、コンピュータ側は綴りの間違えを認識できません。そんなid名・class名の綴りミスはよくおこしやすいのに探しにくい、とても厄介な子です(;O;)

 

HTML・CSSの双方でid名・class名の記載が違っているときは、要素検証をしてもCSS側に検証結果が出てきません。

 

つまり、何か間違えがある為に『スタイルが反映されてない』ということがわかります。綴りが異なっていた場合は、それぞれで違う名前として認識されている、ということですね。

 

自分で決めたid名・class名はよく間違いやすので、要チェックです!


2. スタイルの上書き

f:id:serinaishii:20150903231342p:plain

 

CSS内で同じ要素に対して異なるスタイルを重複して指定した場合、後ろの行にあるスタイルが上書きして反映されます。

 

h1 {

  font-weight: bold; /* フォントを太く */
  color: gray; /* 文字色:灰色 */
  border-bottom: 1px solid pink; /* 下に1pxのピンク色の線 */
}

h1 {
  color: brown; /* 文字色:茶色 */
}

 

・・・と書いた場合、重複している『color』の要素が上書きされて

 

h1 {
  font-weight: bold; /* フォントを太く */
  color: brown; /* 文字色:茶色 */
  border-bottom: 1px solid pink; /* 下に1pxのピンク色の線 */
}

 

というスタイルがh1に反映されることになります。

 

沢山コードを書いているとついつい重複指定してしまうことがあります。

 

こんな時もデベロッパツールで確認すると、どのスタイルが適用されていて、どのスタイルが上書きされているのか一目瞭然です!!


お役に立ちましたか? 

 

厄介なコードミス、されど避けては通れないコードミス。

 

通過儀礼ならせめて簡単に解決して、ササッと前に進める術を身に着けておきたいものですね!

Gmailの便利機能!1つのアカウントで複数のメールアドレスが使える方法

f:id:serinaishii:20150903224432p:plain

 

メールアカウントって普通は、1アカウントにつき1つのアドレスしか使えないものですよね。

 

しかし、Gmailは1アカウントで無限に複数のアドレスを作ることができるます!しかもこれはgoogle公認なのです!

 

今回はその方法を3種類ご紹介します。


Gmailアカウントのエイリアス機能

この便利な『1つのアカウントから複数アドレスを作る方法』は『エイリアス機能』というそうです。

 

----

1. 『+○○』で指定する

ユーザ名の後に『+○○』と書くだけです。『+』の後は任意の文字を指定できるので、使い方は無限大ですね!

 

元のアドレス

  • sometimesstudy@gmail.com

 

『+』のあとは好きな文字でOK!

  • sometimesstudy+sub@gmail.com (sub1、sub2とか)
  • sometimesstudy+0804@gmail.com (日付とか)

 

サービスによる使い分け

----
 
サービスによってアドレスを使い分けると、受信フォルダのフィルターも設定しやすくなります!

2. 『ドット』を入れる

アドレスのユーザ名を『.(ドット)』で区切る方法です。

 

元のアドレス

  • sometimesstudy@gmail.com

 

ドット区切り

  • sometimes.study@gmail.com (単語区切りにしたり)
  • s.o.m.e.t.i.m.e.s.s.t.u.d.y@gmail.com (こんなこともできる!)

 

ダメな使い方

  • sometimesstudy.@gmail.com (@の直前)
  • sometimes...study@gmail.com (ドットの連続)

 ----

 

どこにドットを入れても自分のアドレスとして認識されるということは、Gmailはユーザ名をアルファベットの並び順で管理してるんですね!

 

なので、誰かが『sometimesstudy』というアカウントをとったら、他の人は『sometimes.study』のようにドットの位置違いのアカウントは作れないようになっています。


3. 『googlemail.com』ドメインを使う

Gmailのアドレスを取得すると、ドメイン部分は「~@gmail.com」となっています。

 

しかし、国によっては「~@googlemail.com」のように省略されないドメイン名が使われているそうです。

 

日本では通常「~@gmail.com」ですが、同じユーザ名でドメイン部分を「~@googlemail.com」に変更すれば別アドレスとして使用できます!

 

元のアドレス

  • sometimesstudy@gmail.com

 

『googlemail.com』ドメイン

  • sometimes.study@googlemail.com (ドメイン名だけ変更する)

すべて同じアドレス宛に届く

今回ご紹介したメールアドレスは、すべて元のアドレスと同じメールアドレスとして扱われます。

 

つまり、↓宛てのメールは全て「sometimesstudy@gmail.com」に届くということです!

 

全部『sometimesstudy@gmail.com』に届く!

  • sometimesstudy+sub@gmail.com
  • s.o.m.e.t.i.m.e.s.s.t.u.d.y@gmail.com
  • sometimes.study@googlemail.com

DropBoxを使うときに便利

DropBoxのように、利用できるサービス容量に上限がある場合などにこの方法はもってこいです!

 

DropBoxクラウド上で2GB(初期値)までファイルを保存できるサービスです。

 

このGmailエイリアス機能でメールアドレスを増やして登録すれば、わざわざ別アカウントのアドレスを用意する必要はありません(*^^*)

 

友達との写真やデータ共有に便利なので、こちらもぜひ活用してみてください!

 

www.dropbox.com

 

hakutostyle.com

覚えておきたい!Illustratorで、画像からベクターデータのロゴをつくる方法

新しくサイトを作成するとき、企業やお店側に"ベクターデータのロゴがない!"なんてことはよくあります。
 
過去にはjpg形式で送られてきた画像を、泣く泣く手作業でベクターデータにおこしたこともあります(;0;)
 
そんな苦労をする前に知っておいてほしい…!今回はラスタデータからベクターデータにおこす方法をご紹介します。

ベクターデータ」と「ラスタデータ」について

まず、画像形式について軽くおさらいです!
 
----

ベクターデータ

f:id:serinaishii:20150903230933p:plain

拡大・縮小しても画像が荒くならない、点と線で繋がれた画像のこと。この結び線のことをベクトルと言います。

 ----

ラスタデータ(ビットマップデータ)

f:id:serinaishii:20150903230945p:plain

拡大すると点の集合でできている画像のこと。みなさんがよく使うgif・jpg・png形式の画像はよくよく見ると細かいドット絵の集まりになってますよね!

---- 

 

詳しく知りたい人は下のサイトさんも参考にしてください。
 
■「ビットマップデータ」と「ベクターデータ」の違い - ウェブ学のすすめ

webgaku.hateblo.jp


Illustratorの『画像トレース』機能

では、早速ラスタデータのロゴをトレースしてみましょう!
 
---- 

1.Illustratorに画像を配置する

f:id:serinaishii:20150903231003p:plain

まず、ベクターデータにしたい画像(ラスタデータ)を埋め込みで配置します。
 
このとき、切り抜きに不要な部分は予め取り除いた画像を用意してください。クリッピングマスクなどを使って切り抜くと便利です。
 
クリッピングマスクがわからない方はこちら↓のサイトさんを参考にしてください。
 
イラストレーターのクリッピングマスクの使い方

designers-tips.com

---- 

2.画像をトレースする

f:id:serinaishii:20150903231009p:plain

  1. 配置した画像をダイレクト選択ツールで選択
  2. ツールバーから『オブジェクト』→『画像トレース』→『作成』
そうすると、ロゴがなんとなくオブジェクトっぽくなります。
 
※『画像トレース』はCC・CS6以降の機能だそうです。
  ~CS5だと『ライブペイント』が同様の機能です。(2015.09.15追記)
 
----

3.トレース範囲を調整する

f:id:serinaishii:20150903231019p:plain

このままでも良いのですが、細かい部分が上手くトレースされていないと思いますので微調整して仕上げにかかります。
 
『画像トレースパネル』を出して細かい設定をしていきます。上の画像でいうと、左上に赤丸で囲った部分に四角いアイコンがありますので、これをクリックしてください。
 

画像トレースパネル

…などを調整して、綺麗にパスを抜ける値を見つけます。

 
画像トレースパネルの詳細は↓のサイトさんを参考にしてください。 
 
Illustrator ヘルプ | 画像トレースの使用

helpx.adobe.com

 
----

4.パスを確定する

f:id:serinaishii:20150903231027p:plain

いい感じの形になったら、
 
ツールバーから『オブジェクト』→『画像トレース』→『拡張』でパスを確定します。
 

f:id:serinaishii:20150903231033p:plain

これでラスタ画像からつくる、ベクター画像の完成です(*^^*)
 
----

5.完成前と完成後

f:id:serinaishii:20150903231039p:plain

上がトレース前のgif画像を配置したもの、
下が画像トレース後のものです。
 
ある程度もとがギザギザな画像でもどうにかなりそうですね!
 
あまり細かい装飾や複雑な形には向いていませんが、簡単な図形ならこの子にお任せです!
 
----
 
 この機能を知ったときはすごく感動しました…!!まさに文明の利器ですね!
 
また、写真などのグラデーションのかかった画像をトレースすると、いつもと違った感じが演出できて面白いかもしれません。 
 

f:id:serinaishii:20150903231050p:plain

 

Photoshopでいうポスタリゼーションや、二段階色調のような感じになりますね!

 

とても便利な機能なので、ぜひ頭の片隅に置いておいてください。