外国人から見た日本の風景を考える。『ネオ和風』ロゴを作ってみた:webサイト制作
昨日は学校がお休みだったので、学校のみんなで集まって午後からお勉強会をしてました。各々自分で好きなことをやる自由スタイルで。
和風だけど和風すぎない『ネオ和風』ロゴ11個!
- 純和風でなく洋風なサイト
- クリアなイメージ
- 商品が映えるようシンプルに
外国人から見た日本の風景 『ネオ和風』
外国人の視点で捉えた『日本』映像が秀逸すぎる!!
Our Japan
ロゴをデザインするときの8つのルール
奥多摩 御岳山に登ってきた!都会のオアシス、東京にいながら自然を満喫!
高雄山の次はここ!新宿から1時間ちょっとで行ける東京のオアシス御岳山(みたけさん)に登ろう!!
御岳山の登山スケジュール
- 日程 : 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時間かかるみたいなので、そのまま武蔵五日市駅から御岳山までの行き方を探すことに!
西東京バスという少し小さめなバスに乗って、『上養沢』というところで降りたらどうやら登れるらしい。
上養沢(かみようざわ)でバスを降りる
東京とは思えないような雄大な自然!!
本当にここは東京なのかと疑いたくなるような大自然!
鬱蒼と生い茂る緑に、見たこともないような形の色鮮やかな虫たち。
やっぱり、毎日パソコンとにらめっこしてるだけじゃダメなんだなぁ人って。
こういうところに来るとジブリ映画で頭が埋め尽くされる不思議。トトロもナウシカももののけ姫も、みんなみんな今日のBGMにピッタリなのです。
わくわくする反面、いつクマさんに遭遇するかとヒヤヒヤしながら、できるだけ話したり歌ったりしながら登ります。
石切り場のようなところもいくつかありました。
緩やかな道が少なく、ひたすらに登り登りでちょっとキツい道でした。きちんとペースを考えて登りたいところ。
途中『養沢鍾乳洞』という看板を見かけましたが、何年も前に閉鎖したような跡地が残されているだけでした。
大岳鍾乳洞を諦めて、この養沢鍾乳洞に寄ってみようと考えていたのでちょっと残念。
登り始めて1時間と少し。
いきなり開けた場所にたどり着きました。
前日の雨でジメジメした山道とはうって変わって、お日様カンカンのスカッとした空気と、気持ちいい見晴らし。
道中は誰ともすれ違うことなく来たのですが、どうやら人があまり通らないだけにクマによく遭遇する道だったよう…
残念ですが、お会いできなくて光栄でございました!
御岳山のお隣にある日の出山への道。
日の出山のふもとをぐるっと周り、山頂を通らないで御岳山に行くこともできると、通りすがりのおばあちゃんに教えてもらいました。
ここでやっと第一山人発見です。本当に人っ子ひとりすれ違わない。
この辺りが色々な場所への分岐点で、御岳山とは反対側へ行くと『つるつる温泉』というなんとも可愛らしい名前の温泉にたどり着けるそう。
日の出山の山頂に到着
私たちが登って来た道は『関東ふれあいの道』という名前がついていました。一応、一般的な山道を通ってきたようです。
そして、この辺りにきてやっと1ヶ所お手洗いがありました。
日の出山に別れを告げ、目指すは御岳山!
さて、休憩したら今度は日の出山をくだって、御岳山を目指します。
途中、ナイスな倒木のイスがあったり。
さっきまでの"the 大自然"はどこへやら…いきなりお宿や民家、車に電柱まで出てきたり。
山道がコンクリートやタイル張りになってきたり。
本当に標高1,000mもあるの?と疑いたくなるような風景が広がります。
自然を満喫したくて登山を楽しみに来た私たちは少しガッカリ…
休憩もお土産もここで!御岳山の表参道
50mくらいの場所にところ狭しとお店が並ぶ『表参道』
やっとお水が買える…!!冷たいお水が好きなだけ飲めるって素晴らしいことなんだと改めて実感します。
『亀屋』というお店に入り、店主おすすめのわらび餅を食べながらひと休み。
程よいもちもちさ加減で、疲れているから尚のこと甘いものの美味しさが身にしみます。
御岳山の案内図がありました。
下調べ不足だっただけだけど、民宿おおいっ!!なんか栄えてるじゃありませんか。御岳山ってこんなところだったんだ!!
ロックガーデン巡り
七代(ななよ)の滝と綾宏(あやひろ)の滝という2つの滝が名物のようですが、正直なところ…んー見る価値はないかも。
小さな小さな滝で、来てよかったねー!って感じではありません。
特に七代の滝は、行きも帰りも長い長い急勾配な階段の先にあるので、足腰にかなり負担がかかります…飛ばしすぎないようにマイペースに行きましょう!
ロックガーデンの案内図がありました。
私たちは
[ 七代の滝 ] → [ 天狗岩 ] → [ ロックガーデン(岩石園) ]→[ 綾広の滝 ] → [ 平坦な山道 ]
と周って戻ってくるコースにしました。
逆周りもできますが、歩き疲れた最後の最後に階段をひたすら登ることになるのでおすすめしません。
七代の滝がどうしても見たいのでなければ、ケーブルカー側からロックガーデンに入る際に"向かって左側の道"を通ったほうが良さそうです。くだり階段続きなので、腰に負担がかからないようご注意を!!
そして、『天狗岩(てんぐいわ)』という天狗が空を向いた横顔のような形の岩を過ぎ、少し歩くとロックガーデンにたどり着きます。
チョロチョロと流れる川の上を、飛び石を渡りながら進んでいきます。クロックス履いてる方もいたけど、つるつる滑って危なそう。
石の上を歩いて渡るなんて、映画かゲームの世界でしか見たことない!童心にかえってうきうきが止まりません!!
岩に苔に川に!どこかにもののけ姫のコダマがいそうな気がしませんか?
夏なのに涼しく、川のせせらぎが心地よいとても素敵な場所でした。
きっと家にいたら、今頃クーラーづけ&パソコンづけの不健康な日常を送っていたかと思うと…御岳山に来て良かったと心から思いました。
帰りはどこまでも続く平坦な山道です。目ぼしいものはあまりありませんが…逆周りをして階段をひたすら登るよりはずっとマシ!
表参道でほっと一息
ケーブルカーもあった!
心残りは『生涯青春の湯 つるつる温泉』
日の出山にある『生涯青春の湯 つるつる温泉』
御岳山モデルコース3パターン
私が通ったコースも山あり谷あり、変化に富んでいてとても楽しかったのですが、御岳山は2回・3回と来ても面白そうなところです。
ということで、今回とはまた違ったコースをご紹介して終わりといたします。
----
1.初心者向け:ロックガーデンを周ろう(★★☆☆☆ )
御岳山|山ガールのための山歩きガイド
御岳駅
↓
バスで御岳山のふもとへ
↓
ケーブルカーで山頂へ
↓
御岳山 表参道
↓
ロックガーデン巡り
↓
ケーブルカーで山のふもとへ
↓
バスで駅へ
↓
御岳駅
----
2.中級者向け:ハイキングがてら『つるつる温泉』に行こう(★★★☆☆ )
御岳山から日の出山~つるつる温泉ハイキングのコースガイド
http://www.geocities.jp/hmrmyamada/yamaaruki/hinodeyama20121103.html
御岳駅
↓
バスで御岳山のふもとへ
↓
ケーブルカーで山頂へ
↓
御岳山 表参道
↓
日の出山 山頂
↓
つるつる温泉
↓
バス
↓
----
3.上級者向け:大岳山も!大岳鍾乳洞も!がっつり楽しむ(★★★★☆ )
奥多摩ハイキング(御岳山~大岳山~大岳鍾乳洞)
御岳駅
↓
バスで御岳山のふもとへ
↓
ケーブルカーで山頂へ
↓
御岳山 表参道
↓
長尾平分岐
↓
大岳山荘
↓
大岳山 大滝
↓
バス
↓
御岳山の紅葉を見に行きたい!
最後になりましたが、御岳山は秋の紅葉の時期に行くのが1番楽しそうです!
かき氷屋のおばちゃん曰く『紅葉が見たかったら、11月10日』においで!と日付指定で教えていただいたので、またその頃に今度は別のルートで遊びに行こうと思います。
画像圧縮・軽量化サイト3選!見た目そのままでファイルサイズ大幅ダウン!
webサイト作成時やバナー納品時、画像サイズが大きいと送るほうもなんか悪いし、受け取るほうも負担になるしで困っちゃいますよね。
1つ言えることは、画像も人間もおデブちゃんよりはダイエットしたほうがカッコイイってことです!
クライアントに納品する前に、やっておきたい画像軽量化!
そんなこんなで、今回は画像の見た目はそのままで、ファイルサイズだけダウンしてくれるwebサービスを3つご紹介します。
どのサイトさんもオンラインで完結!アプリケーションのダウンロードが不要なので、お手軽簡単です!ぜひお試しあれ!
軽量化手順
- 黄色い枠で囲んだエリアに画像をドラッグ&ドロップする
- 各サイト所定のボタンを押してダウンロードする
手順はたったの2ステップ!準備はOKですね?それでは参りましょう!
画像圧縮・軽量化サイト3選
Tiny PNG(タイニーピング)
パンダのマスコットキャラクターが気持ち悪いとか、一周回ってかわいいとか諸説ありますが、とりあえず私が一番お世話になっているサイトさんです。
『png』と名前がついていますが、png形式の画像だけでなく、jpg形式も圧縮してくれます。
画像は同時に20枚までアップロードができます!パンダちゃんなだけあって器がデカい!
圧縮後のファイル名も余計な編集がされないので、とても使い勝手のよいサイトです。
(『sample.png』→『s_sample.png』などにファイル名を変更しない、ということです!)
JPEG mini (ジェイペグ ミニ)
ほとんど画質を落とさずにファイル容量を8割くらいダウンできるお利口さんサイトです。
TOPのサンプル画像を見てもわかるように、圧縮前後の写真を比べてもほとんど遜色ありませんね。素人目には全くわからないくらいです。
ただ、このサイトの欠点は1枚ずつしかアップロードができないこと。
どうやらプロのデザイナーさん方はオンラインではなく、ソフトをDLしてお使いになるもよう。無料版は20枚/日の処理制限つきで、有料版は2,400円(2015年8月17日現在)で制限なし。気になる方は調べてみてください。
軽量化前後の画質について詳しく比較してくださっているサイトさんを見つけたので、よければ併せてご覧ください。
small pdf(スモール ピーディーエフ)
最後に、こちらは画像…と分類してよいのか迷いましたが、『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 コンサート『ナイトメアー・ビフォア・クリスマス』
“ディズニー・イン・コンサート”とは
ディズニー映画全編を大スクリーンに映し出し、生演奏の音楽で鑑賞する、というとっても贅沢なコンサート! 作中の音楽部分はすべて、総勢100名以上のオーケストラとコーラスの生演奏で堪能することができます。
今回は映画監督のティム・バートン(本作は制作で携わっています)と、作曲家のダニー・エルフマンがタッグを組んだ「ナイトメアー・ビフォア・クリスマス」と「アリス・イン・ワンダーランド」の2作品が上映されました。
Disney in コンサート オフィシャルサイト
http://www.disney.co.jp/eventlive/inconcert.html
作曲家ダニー・エルフマンが直々に歌声を披露!
大好きな『Nightmare Before Christmas』 全編をオーケストラの生演奏で鑑賞する『ディズニー・イン・コンサート』に行ってきました。
国際フォーラムの1番大きなホールで、S席の前から14列目!真ん中よりのとてもいい席でチケットがとれました!オーケストラ・コーラスの皆さんとの距離がとても近くて感動もひとしお。
作詞・作曲と作中でジャック・スケリントンの歌声を務めたダニー・エルフマンが直々に歌声を披露してくれました!実は、彼が歌ってくれるということを当日まで知りませんでした…(笑)
いつも映画で聴いていたジャックの歌の主が目の前で歌ってくれているなんて…感極まりまくりです!作曲家さんなのに見る人を楽しませるエンターテイナーっぷりが凄まじい!歌声もさながら、表情やパフォーマンスも含めて"キング・オブ・パンプキン"そのものでした!
男女4人のコーラスさんも個性豊かで歌声もしぐさもお茶目でとってもキュート!
幕間に演奏してくださったヴァイオリニストのサンディ・キャメロンも圧倒的なパフォーマンス力でガンガンに引き込まれました。演奏していない時のちょこちょこした動きもすごく可愛かったです。
ティム・バートン&ダニー・エルフマン映画音楽コンサート サンディ・キャメロンの圧倒的パフォーマンス!
(↑こちらは今回の演奏でなく、昨年のコンサートのものです!)
休憩も挟んで2時間半にわたる映画上映がすべて終わり、ホール全体から拍手喝采!今までの人生、スタンディングオベーションが起こるような場に居合わせたことがなかったのでびっくり!
エルフマンが最後にアンコールまでしてくれて、感動の余韻が残るなか舞台が幕を閉じました。最高のひととき…感無量です!!
Disney in コンサート 関連動画
8月に来日!ダニー・エルフマンが歌う!「ナイトメアー・ビフォア・クリスマス」
ダニー・エルフマンから日本のファンへ熱いメッセージ到着
作曲家ダニー・エルフマンが明かす秘話
ダニー・エルフマンのジャック・スケリントンはこうやって生まれた!
公開された映像で、エルフマンは「『ナイトメアー・ビフォア・クリスマス』はもっともエキサイティングで思い出深い作品ですね」と語り、「映画を作っている、仕事をしているというより楽しく遊んでいる感じだったのです」と回想。
また、主人公ジャック・スケリントンの歌を自身が担当したいと思っていたが言い出せずにいたところ、バートンの方からオファーをしてくれたという秘話を明かしている。
先行予約特典・チケットも素敵!
今回「ナイトメアー・ビフォア・クリスマス」と「アリス・イン・ワンダーランド」の2作品の公演があり、それぞれ上映回によってチケットの絵柄が違いました。
私は8/8(土)公演の黒いチケットをチョイス。ついつい自分好みのチケットで上映時間を選んでしまいました!
HTML/CSS初心者のコードミスを探せ!googleデベロッパーツールの使い方
初心者さんにあるあるなコードの記載ミス。
初心者お助け!google developerツール!
Google Chrome Developer Tool
ブラウザの準備
標準ブラウザ
特にアドオンなどを別途で入れる必要はありません。DLしたら次へ!
google developerツールの使い方
まずは、デベロッパーツールの起動方法、次に要素検証に使うツールを簡単に説明していきます。
----
1. 起動方法
ツールバーからも起動できますが、『F12』キーを押すのが一番早いかなと思います!ボタン1つなのでぜひ覚えてください。
1. ツールバー
- 『Google Chromeの設定』(ブラウザ右上の三本線ボタン)
- 『その他のツール』
- 『デベロッパーツール』
2. ショートカットキー
3. 右クリック
- ブラウザ上で右クリック→『要素を検証』
2. 基本操作
さて、無事にデベロッパーツールが起動できたところで、早速使い方をご紹介しましょう!
基本的な操作はたったのこれだけ!!
すると、デベロッパーツール側で選択したオブジェクトのコードやスタイルが見えるようになります。
コードを確認する場所
- HTML: 画面の左側 / Elementsタブ
- CSS: 画面の右側 / Stylesタブ
3. 検証方法 - ボックスモデル
検証の仕方
個人的に、このボックスモデルの検証は1番よく使います!
サイトのデザインにもよりますが、margin・paddingは見えにくい要素です。・・・ということは、レイアウトミスが起きやすい要素でもあります。
なので、初心者ほどChromeのデベロッパーツールでよく確認しましょう!
コードミスを探せ!
冒頭でもふれたように初心者さんあるあるなスペルミス!!!まさに天敵ですね!
今回はよくあるコードミス2パターンについて書いてみました。
----
1. 綴りミス・スペルミス
さて、デベロッパーツールで自分が書いたコードを確認してみましょう。HTML・CSSともにそれぞれの要素に色がついているのがわかるかと思います。
1. 要素名の綴りミス
- 画像のように『注意マーク』が出る
- 要素に色がつかない
・・・という現象が起きるので、ひたすらソースとにらめっこするよりもグッと簡単に間違いを見つけることができます。
2. id名・class名の綴りミス
id名・class名は、人間が任意で決めた名前なので、コンピュータ側は綴りの間違えを認識できません。そんなid名・class名の綴りミスはよくおこしやすいのに探しにくい、とても厄介な子です(;O;)
HTML・CSSの双方でid名・class名の記載が違っているときは、要素検証をしてもCSS側に検証結果が出てきません。
つまり、何か間違えがある為に『スタイルが反映されてない』ということがわかります。綴りが異なっていた場合は、それぞれで違う名前として認識されている、ということですね。
自分で決めたid名・class名はよく間違いやすので、要チェックです!
2. スタイルの上書き
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つのアカウントで複数のメールアドレスが使える方法
メールアカウントって普通は、1アカウントにつき1つのアドレスしか使えないものですよね。
しかし、Gmailは1アカウントで無限に複数のアドレスを作ることができるます!しかもこれはgoogle公認なのです!
今回はその方法を3種類ご紹介します。
Gmailアカウントのエイリアス機能
この便利な『1つのアカウントから複数アドレスを作る方法』は『エイリアス機能』というそうです。
----
1. 『+○○』で指定する
ユーザ名の後に『+○○』と書くだけです。『+』の後は任意の文字を指定できるので、使い方は無限大ですね!
元のアドレス
- sometimesstudy@gmail.com
『+』のあとは好きな文字でOK!
サービスによる使い分け
2. 『ドット』を入れる
アドレスのユーザ名を『.(ドット)』で区切る方法です。
元のアドレス
- sometimesstudy@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』に届く!
DropBoxを使うときに便利
DropBoxのように、利用できるサービス容量に上限がある場合などにこの方法はもってこいです!
DropBoxはクラウド上で2GB(初期値)までファイルを保存できるサービスです。
このGmailエイリアス機能でメールアドレスを増やして登録すれば、わざわざ別アカウントのアドレスを用意する必要はありません(*^^*)
友達との写真やデータ共有に便利なので、こちらもぜひ活用してみてください!
覚えておきたい!Illustratorで、画像からベクターデータのロゴをつくる方法
「ベクターデータ」と「ラスタデータ」について
ベクターデータ
拡大・縮小しても画像が荒くならない、点と線で繋がれた画像のこと。この結び線のことをベクトルと言います。
- 代表的なソフト:Adobe Illustrator
- 拡張子:svg、eps など
ラスタデータ(ビットマップデータ)
拡大すると点の集合でできている画像のこと。みなさんがよく使うgif・jpg・png形式の画像はよくよく見ると細かいドット絵の集まりになってますよね!
- 代表的なソフト:Adobe Photoshop
- 拡張子:gif、jpg、png、bmp など
----
Illustratorの『画像トレース』機能
1.Illustratorに画像を配置する
2.画像をトレースする
~CS5だと『ライブペイント』が同様の機能です。(2015.09.15追記)
3.トレース範囲を調整する
画像トレースパネル
- しきい値
- パス
- コーナー
- ノイズ
…などを調整して、綺麗にパスを抜ける値を見つけます。