音楽教室ロゴをデザインしました。

【ロゴデザイン】

ロゴとWebサイトのデザインのご依頼をいただきました。

今回の依頼は直接ではなく、株式会社ペルケオさんが間に入ってやり取りをしてくださいました。その節はありがとうございました！！

ホームページを作るにあたり、ロゴも作りたいというご要望がありました。
先にロゴを決めてからということで、ご提案を４案作り、そこからお客様の意見を伺いいくつかの修正を加えて決めて行きました。

クライアントの「はなまる音楽教室（Hanamaru.y）」さまは、ピアノとエレクトーンの音楽教室です。

まずは手で描く

手でスケッチして案を固めて行きます。
私はA4のコピー用紙にランダムに描いて派生させていく感じです。
見た目は落書きですが、ちゃんと考えてます。

実際のスケッチ

４案を提案するので、複数パターン何かしら出てくるまで、スケッチタイムです。
シンプル、かわいい、かっこいい、ダジャレなどイメージして考えていくと出てくる気がします。

「これでロゴに起こしてみよう」と複数決めたらPC上に方眼を作り、形を決めていきます。
実際の方眼用紙に手書きすることもあります。

出来上がったら提案書づくり

自分の経歴で企画会社にいたという事が、かなり影響しており提案書は文字多めです。
パワポで作ります。

制作者の意図を伝えるために、以下のことを必ず書いてます。

• そのロゴを一言で何と言えるか
• コンセプト文章
• 展開例
• カラー案

とにかく文字で伝えるようにしてます。
提案書はラブレターと思って書いてます((o･д･)b

実際の提案書

女性の方がクライアントだったので少し枠に装飾を入れました。
展開例は、実際使われている様子を例としてつくる時もあります。
そういう時は１つのロゴに２、３ページ使います。

ロゴの決定

お客様の「もっとこうしたい」といういくつか修正を加えて、ロゴを決めていきます。
今回は「音符」と「はなまる」と「HとY」を融合させたロゴに決定しました^^
ロゴのみのご依頼の時は、ai、jpg、pngデータをお渡しして完了です。

終わりに

せっかくなので、私がロゴをどうやって作っているかを書いてみました。
色々なやり方、見せ方があると思います。
提案書はもっとスペース取って、ゆったりと見せた方がデザイン的にかっこいいのですが、１枚にまとめたい気持ちの方が強くてぎゅっとなってます。
どんな企画会社にいたかお察し…(^^;)ですね。

ロゴの次は、WEB制作です。
次の記事に書きたいと思います。
webアプリケーション制作の株式会社ペルケオさんとがんばりました♪

【コペンフラップ主催】デザインの勉強会

【コペンフラップ勉強会（一般公開前のプレ勉強会）】


コペンフラップは、デザインの仕事受注をクラウドで行なう会社です。
私が講師登録しているのはコペンカレッジなんですが、

昨年の夏に
仕事受注部門とデザインスクールを
別々に切り離して、

デザインスクールとして一般社団法人コペンカレッジに、
デザインの仕事受注管理を行なう株式会社コペンフラップになりました。


別になったとはいえ、両方とも運営は同じメンバーで、講師陣も一体となってフラップでデザインの仕事をしてます。

先日、コペンフラップ主催で勉強会がありました。

運営でもありアートディレクターでもある、ゆっちーさんが実際の仕事などを見せてくれる機会を設けてくれました。

仕事を始めたばっかりの初心者デザイナー向け勉強会とのことでしたが、３年目の私も改めて知っていることの確認になりました。

私はデザイン事務所出身ではないので、「デザイン界の暗黙の了解がわからない」のが独立したての頃の悩みでした。

「常識でしょ？」と言われていることは、なかなかネットにも載ってません。
気がつかず失敗していた…ということがありました。


例えば、

• イラレにリンク配置でjpgは使わない。psdやepsに変換したものを使うとか(^^;)
• RGBをCMYKに変更するとか(^^;)
• トンボはアートボードの中央に配置するとか(^^;)

今改めて書くと、恥ずかしい…。
印刷会社さんのホームページにも注意事項として載っていますが、当時は疑問すらなかったですから、調べない→あれ印刷がおかしい？ということもありました。


そんな状態から抜け出すためにやったことは、

• デザイン事務所出身の経験のある方に教えてもらった
• DTPの勉強会に参加した
• TwitterでDTPの仕事している人をフォローした

です。

さらに講師として、

• BMW(Brides Made Wedding)の添削を担当させてもらった
• WEB制作会社の研修の講師をさせてもらった

が大変良い経験になりました。

だんだんと「なぜ、こうした方がいいのか」も説明できるようになりました。


来年2019年1月でフリーになって丸３年。

幸運なことに色々な方にお声かけいただき、けっこうガンガン経験積ませてもらったと思います。
請求書ナンバーも60件を突破しました！(∩˃o˂∩)わーい（9月現在）

今はPHPとWordPress、WEB関連の勉強を強化中です！！


さて、
コペンフラップの勉強会ですが、まだプレ段階とのことですが定期的に開催予定です。
次回は９月20日(木)。
この回は私も講師として「レイアウト」についてお話する予定です。

がんばります。

イラストでイメージしやすく！音楽チラシデザイン。

【チラシデザイン】

まずは背景のイメージカラー

10月6日の「シャンソン&マリンバコンサート」のチラシをデザインしました。
コンサート会場のフェチーチェピアノサロンスタジオ様からの依頼です。

イメージカラーは初秋です。
葉がグリーンからオレンジに変わる色あいにしました。

背景は、ipadで描いたテクスチャーを使ってます。芸術の秋っぽく。

ipadで描いた一部分

実際の葉の写真をPhotoshopで重ねて、色調を変えてます。

Photoshopで作った背景一部分

デザインの「魅せ要素」に困った

何度かコンサートのチラシをデザインしていてけっこう困るのが、特にテーマがないコンサートです。

クリスマスとか大きな季節イベントがあればいいのですが、10月…って？

10月は、中秋の名月かハロウィンがありますけれど、このコンサートは特に曲目もそういったイベントを意識したような曲もなく…。

キャッチーなテーマがないとデザインも作りづらいです。
とは言え、デザイナーですから必ず何か「価値」を見つけ出します。

秋で紅葉？？葉っぱいっぱい？？
シャンソンでノスタルジー？？

うーんと悩んだ結論、今回は、やはりシャンソンとマリンバとピアノのコラボレーションかな〜と。

しかし案の定写真が…証明写真のようなプロフィール画像しかなかったので、コンサートをイメージできるイラストをいれることにしました。

楽しそうに演奏している画像があれば最高なんですけどね〜。

イラストを「魅せ素材」に

iPadでイラストを描きました。
最初からパスになっているので、拡大も色変えも自由です。便利！

どんなコンサートかわかるように演奏している人を描きました。
顔の部分はプロフィール写真からイラストを起こしたので、
軽く本人のイメージイラストですね。

イラストをメインにしたので、楽しげなイベントっぽくなったかな〜。

コンサート情報

• 日時：2018年10月6日（土）14時開演
• 場所：埼玉県川口市芝２−３−１１　フェリーチェピアノサロンスタジオ
• 料金：2,500円

11月コンサートのチラシデザイン

【チラシデザイン】
11月30日のコンサートのチラシをデザインしました。

イメージカラー

秋のコンサートなので、オレンジ色をメインにしました。
オレンジ色って元気良すぎちゃって上品にするのが難しいかなと思ったのですが、エルメスオレンジを思い出して「上品オレンジやってみたい」と頑張ってみました。

背景にこだわりました

使った絵画はウォルター・クラインの「四季の仮面」です。
作家死後１００年経っており、著作権が切れているので使いました。
春夏秋冬が擬人化された絵です。

Photoshopを使い背景を作りました。
絵画を４つにわけ、今回のコンサートの「秋」の人を大きくしました。
冬が右下なのですが、ちょっと怖い感じ。

背景画像

背景画像のさらに背景の花の部分

実際の花の写真を加工して、絵画の背景にしてあります。
11月に綺麗なダリアとバラです。
なるべく絵画と馴染みが良いように、切り抜きをわざと汚くしたりしてます。

イラレでレイアウト

文字をIllustratorで入れていき、絵画の顔だったり、花の顔だったり、変な風に覆わないように気をつけて配置していきました。

表題の「ソプラノ・バリトン&ピアノの夕べ」の文字に少し飾りをつけ、「AutumnConcert」と英字を入れました。
安易に英字を入れるのはあまり好きではないのですが、今回はフォントが気に入いりまして、なんというか挿絵的に？入れてます。

終わりに

ソプラノの平田さんからデザインを褒めていただきました。
嬉しいです！！


今回のコンサート、実は私も影マイクで当日協力することになってます。
朗読をやるみたいなのですが…どきどきしますー！




2018年11月３０日(金)
18時半開演（18時開場）
場所：フェリーチェピアノサロンスタジオ
料金：2,500円
申込先：info@felicepss.com

Adobeモバイル用アプリのデータはどこにいった？

Adobeのモバイルアプリは便利。だが…

Adobeのモバイルアプリは優秀で、IllustratorやPhotoshopの一部機能が無料で使えます。

とくに私は、iPhoneで背景のいらないものを消したりできるPhotoshop Fixが重宝しています。

PCを開かなくても編集できてラク！

昨年買ったiPadには、DrowとSketchを入れました。
iPadはPCの補助として使うつもりで買いました。

Drowは自分の描いたものがライブトレースしなくても、パスになっているという素晴らしいアプリ。


「これで自分のイラストを即デジタル化できる！と」思っていたのですが、
いざPCに送信してみたら、描いたもの（aiデータ）が
どこに格納されているのかわからない、という事態が発生しました。

公式サイトには、
モバイルアプリで送る→PCですぐ編集できるとあります。

確かにイラレを立ち上げるとすぐにアプリのデータが立ち上がります。

だけど
「とりあえず送って後で編集しよう〜 ^^」と思う時もあるわけです。

このようにタイムラグがあるとイラレ立ち上げ時にアプリデータが立ち上がらないことがあり、またiPadで送信するという二度手間になることがありました。


AdobeCreativeCloudフォルダにないし…
昨日送ったデータは…PCのどこに入った？と探し、ついにライブラリフォルダの奥深くで発見しました。

Adobeモバイルアプリデータの場所

まずはDrowで保存が確かにされているか確認

Drowの右上アイコンから「アドビディスクトップアプリケーション」を選択

Illutratorを選択。「送信されました」と出たらOK。

さてPCのどこに行ったか。

この中です

Macintosh HD
→ユーザ
→ユーザ名
→ライブラリ（薄い文字になっている）
→Application support
→Adobe
→OOBE
→PushToDesktop

または

Finder

→上のバー「移動」

→optionを押すと現れるライブラリをクリック

→Application support

→Adobe

→OOBE

→PushToDesktop

このPushToDesktopフォルダの中にDrowのaiデータがありました！

不可視フォルダなので、Finderでフォルダ検索しても出てきません。

このライブラリフォルダ、特定のアプリケーションのキャッシュを消す時にアクセスする人が多いようです。

もう〜どこにいっちゃったかと思ったよ〜〜。

私的には、データがすぐに立ち上がらなくてもいいから
CreativeCloudフォルダに保存されるとか
わかりやすい形でaiデータを受け取りたいです^^;

でも謎が一つ解けたのでスッキリ。

プログラミング初心者勉強中

Progateのマイページ

プログラミングの勉強はじめましたというブログ記事を書いてから、２週間ほどが経ちました。
あれからProgateに有料登録して、少しずつPHPに挑んでます。

大きなノートを用意した

初めて見る単語の数々…
私は復習の際ノートにまとめたりして、理解していってます。

はじめ、普通サイズのB5ノート(方眼)にコードや理解するための絵とか描いていたのですが、コードが長くなったり、一行で見たい時に不便でした。
HTMLとCSSの勉強の時は十分だったのですが。

もっと大きいのに書こうと見つけたのが、B4サイズの無印のらくがき帳。
すごく使いやすいです。
大きいし、無地なので自由に書けます。

プログラミングに出てくる言葉「関数」を調べたら、
もともとfunctionの音訳だったという事がわかり、
「無理して日本語の意味を理解しなくてもいいんだ」という事がわかりました。

オブジェクト指向でつまづいた

プログラミングの考え方って独特ですよね(´･ω･`)


「オブジェクト指向」という言葉が出てきた時、「オブジェクトって何を指しているの？指向ってどういう意味？」と頭の中ハテナでいっぱいでした。

説明文を読んでも全く理解できない…。

これはつまずくポイントかもと思い、ここで踏みとどまるんだー！と頑張って色々調べて見ました。


だんだん見えてきたのが、
これまでの手続き型と呼ばれるプログラミングからの脱却を目指して作られたのがオブジェクト指向だそうです。


例えば、ネットショッピングサイトのプログラミングを書く際、
１つの商品に「商品を選ぶ→計算する→決済する」といったプログラミングをそれぞれの商品ごとに書くとしたら膨大な量になります。
これが従来の手続き型と呼ばれるものです。


商品や値段はそれぞれ値が違えど、配置するのは商品の写真（img）、その下には値段（数字）と決まっています。
それならば、一括で設定できた方がプログラミングの量も少なくすむし、修正もラクな上、スペルミスも最小に抑えられます。
それがオブジェクト指向です。

ふむふむ
内容はわかったけど、で、オブジェクト？指向？ってなんでその言葉なの。

オブジェクト指向は、英語でobject-oriented programming。
直訳は「目的重視のプログラミング」。
英語にオブジェクトって単語が使われてるのかとわかり。

お？英語の方が何となくつかめるかも？


「共通のモノ事、動きを分類して、
どう目的を処理するか命令するテンプレートを作ること」

これが私の「オブジェクト指向」とは？の答え。
そして日本語訳の意味は「よくわからない」のも答え。

日本語ムズカシイデス。

Harumi Galsを見て来ました

【展示見に行きました】

ggg（ギンザ・グラフィック・ギャラリー）で開催中の「HARUMI YAMAGUCHI×YOSHIROTTEN Harumi's Summer」を見て来ました。

gggサイトより

(gggサイトより引用)
1970年代の幕開けとともに登場し、一商業施設を超えて社会現象となったPARCO。山口はるみは、イラストレーターとしてその立ち上げ当初から広告制作に携わり、一躍時の人となりました。彼女が描いた女性たち＝Harumi Galsは、PARCOの宣伝戦略と絡み合いながら、新しい生き方を志向する当時の女性たちを大いに元気づけたのです。そして、まさに画面から飛び出さんばかりの、強く、明るく、しなやかなHarumi Galsたちのエネルギーは、広告という役割を終えた今日でもなお、色褪せることなく、人々を魅了し続けています。
本展では、山口はるみ自身の発案により、グラフィックアーティスト／アートディレクターYOSHIROTTENをコラボレーターとして迎え、2018年夏限定 [Harumi’s Summer] を展開します。当初の目的から切り離されても、その輝きを失わない普遍的な力が山口の仕事ひとつひとつに宿っているからこそ実現できる試みです。エアブラシによる代表作をはじめ、多彩な表現技法を採用したPARCO「のように」シリーズや、吉屋信子伝（田辺聖子著）のための美しい挿絵、JRAのために描いた優雅な馬たち他、山口が対象と真摯に向き合い、技法を吟味し、世に送りだしてきた傑作の数々を、YOSHIROTTEN独自の視点で切り取り、再構築します。
'時代を弾くイラストレーション’ ―山口の盟友小池一子さんがそのように評する山口はるみの仕事と、新世代のクリエイティブとの、ひと夏限りのセッションをお楽しみください。

PARCOの初期広告はイラストレーションのみだったのですね。
当時のCMも見る事ができて、面白かったです。
独特の世界で見入ってしまいました。

今は閉店してしまった千葉PARCOには10代〜20代お世話になってました。
この山口はるみさんのイラストはもう使われていなかったけれど、
PARCOと聞くと、わくわくしてお買い物した記憶が出て来ます。

Harumi Galsと言われる女性たちのイラストレーションは、すごく女性が生々しく魅力的で、かっこよくて、目力がすごかったです！

セロリを丸かじりしているイラストが気に入ったので写真に残してきました。
かっこいい！！

壁にイラストがコラージュされてあって、色々な表情でこちら女性たちが見ていました。

おっぱいとか、足とか、おしりとかババーンと出てているのだけど、エロスよりも健康的な感じがしました。
「女性の美しさを見よ！」と強く言われているような感じでした。


あと、gggギャラリー入った瞬間、強いブルーとピンクの光が覆っていて、リゾートなような小道具もあって水の中にいるような不思議な空間でした。
イラストレーションとマッチしてて好きな演出でした。

プログラミングの勉強をはじめました。

【Webの勉強】

Cafe柿の庭のホームページが古いので、現在リニューアルを計画しています。
メンテナンスが楽なのでWordPress導入も考えてます。
そしてせっかくなので、HTMLとCSSの一から作ってみようと思ってます。

サイトを「一からWordPress導入まで全て作ってみたい」という、
ただただ「やってみたい！」という個人的な野望？衝動？目標？

その前に立ちはだかる壁！

そうPHPです。

WordPress化するためにはPHPの知識が必要です。

そこでPHPを勉強しようと思って、本を読んでみたのですが、どうにも眠くなるので、「やっぱ体を動かしての実践だ！」と実際に打って覚えられるサイトを見つけてやってみました。

見つけたのは、
プロゲートhttps://prog-8.com/というアイコンが可愛いサイトです。

Progateの学習できる言語一覧

学びたいプログラミングを選んで学習していきます。
HTML&CSSやJavaScriptもありました。

はじめに数枚のスライドで学び、クイズ形式でコードを打つ、という感じで進めていきます。

本を読んであった成果も多少あり、けっこうサクサク進みました。
無料で受けられるレッスン部分まで進める事ができました。


すべて無料ではなくて、ある程度進んだら有料になります。

ファーストステップの学習コースがまるまる無料なのでよかったです。
まず「基本を知る」のにとてもよかったです。


敵を倒していくみたいな特別面白いゲーム要素はないのですが、クイズ形式なので、コードの間違いなど実際に打ってわかります。

全く眠くならなかったです！←コレ重要！



jQueryを学んだ時にその時先生が「セレクターを選ぶのが重要」とコツを教えてくれたのが思い出されました。

全くとっかかりがない中で、コツを端的に教えてくれたWebの先生には感謝してます。

PHPも「何」に対して命令するのか、まず考えるのがコツだと思いました。


暗号のようなコードが少しづつ意味がわかる感じ...外国語を学んだ感じに似ているかも。


期限がないとズルズル先延ばしになってしまうので、月額登録(有料)して勉強してみようと思います！

建築会社さんのWebサイト内アニメ

こんにちは、石田です。

以前、建築会社さんのWEBサイト上に載せるアニメーションの絵を描きました。
年末年始と作業して、その後アニメーションにする作業を専門の方にしてもらって、最近ようやくサイト上で公開されたようです！
コペンフラップのアートディレクターさんとのお仕事です。

絵はイラレで描きました。
aiデータを動かすようで（どうやって動かくすのかわからない）、背景＋10シーン＋アルファ描きました。

動画自体は、結構前に完成していて、ディレクターさんに見せてもらったとき「動いてる！」とすごく嬉しくて感動しました。

自分ではこんなに滑らかに楽しげに動かせないので、ホント動画の仕事する人すごいと思います。

イラレでのラフの状態

http://www.loyal-eng.co.jp/のWEBサイトトップに使われてます。

似顔絵は違う方が以前描いたものをクライアントがお持ちだったのでそれを参考にパスでトレースして当てはめてます。

イラレのペンツールでパスを描いていく中で、楽しかったのが電話のコードくるくるです。(追記：動画にする上で存在はなくなってます)
地味に時間がかかったのがPCのキーボードでした。ほとんど見えない部分なんですけど、ただ図形並べると海苔みたくて…。イラレのアピアランス３Dでほんのり立体にしました。
動画では見えないけど…。

空調と水道配管とか以前に少し似たような絵を描いた事があったので、この部分の修正が発生しなかったのは奇跡的で良かったです。

もうね、終始私の絵は動くのか！？というドキドキ感がありました。
動画制作のプロは私にとって魔法使いのようですよ。

デザイナー竹久夢二を知る

【展示見に行きました】夢二繚乱展


東京ステーションギャラリー
2018年5月19日（土）〜 7月1日（日）
http://www.ejrcf.or.jp/gallery/exhibition/201805_yumeji.html

竹久夢二の絵をちゃんと見たのは初めてかもしれない。
大正ロマンというと必ず思い浮かぶ竹久夢二。
あのタレ目なのっぺりとした独特な顔の女性が私はどうも苦手で、ちょっと敬遠気味でした。
今回の展示は、義両親に超絶オススメされたのと、このチラシが可愛すぎて好みだったので行ってみようと気になりました。
チラシの効果大きい^^ ;

行ってみた感想は、竹久夢二の見方が「よく知らない画家」から「飛んでるデザイナー」に変わりました。

そう、彼はイラストを得意とするデザイナーでした。

装丁など数多く手がけてました。
確かに学生の時に居眠りしながら学んだデザイン史にちらっと顔を出していたっけ。

夢二は女性画が得意たるゆえんが、展示のクライマックスにある自伝小説「出帆」でわかります。
実際の年表と「出帆」の挿絵や話に合わせて展示がされていました。

芸術家の例にもれず、やはり女性関係が飛んでました。
生涯に何人いるの…？というくらい。
女性が好きだし、女性に好かれる人だったのだなとわかります。

おばちゃん２人組が展示の所で「えーこの人が病気の時にもう違う人に恋してる！？」と騒いでいました。


最初の妻「たまき」は夢二が他の人に恋をして年表には途中から登場しなくなっていたけど、夢二が亡くなった療養所で、「夢二がお世話になったから」と３ヶ月お礼奉公で働いたらしいです。

なんかちょっと最後、感動しました。
女性からしたら浮気っぽくてとんでもない男だけど、とんでもなさ含めて彼が好きだったのだなと。


こんな私生活ぐちゃぐちゃしてても竹久夢二がした仕事量はとても多くて、そのメンタルの強さとか創作意欲はすごいなと思いました。

女性の形の描き方がすごく美しいです。
立って扇子で口元隠す体のポーズのバランスとか、しなやかな手とか。
こんなふうに魅力的に自分を美しく描いてくれたら、夢二に恋しちゃうかもですね（笑）

SVGを学べる本

【本の感想・レビュー】おすすめデザイン本

インプレス

「Web制作者のためのIllustrator＆ベクターデータの教科書」

著者：三階ラボ（長藤寛和、宮澤聖二）著/窪木 博士　著/松田 直樹　著/あわゆき　著

• 発行所：インプレス
• 2015年5月22日第1刷発行
• 評価５ ★★★★★

Webの制作をすることが増えてきたので、仕事を進行しつつ勉強中です。
SVGのことを学びたくて見つけた本です。

SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、jpgやpngのような画像とは違い、座標で図を描くベクターデータ形式の一つです。

図の情報が座標なので拡大しても、画像がガビガビにならずキレイに表示されます。
小学校だか中学校で習う数学の放物線を思い浮かべるとわかりやすいです。

〇〇.svgという拡張子がついたデータになります。
Adobe Illustratorで取扱いができます。

ベクターデータをWeb上で扱えるようになり、何でもかんでも画像にする時代に終わりが来ているようです。
Webを学んだ3年前にもSVGはありましたが、学校では触れる事なく…未来の技術だと思ってました^^;

これが今や主流になりつつあるんですから、ほんとWebは技術の進化が早いです。

本には、SVGにもアートボード(描画表示域)があって自分で書き換えられたり、不要なHTML記述があるので削除したりを教えてくれます。
SVGやイラレだけでなくSketchも紹介しています。

この本を読んだ後に、生明塾 by AZM Designの「Webデザイン新時代のIllustrator新技法」という講座も受けてみました。

「もっとSVG使おうよ！」と生明先生が叫んでました。

イラレCC2018バージョンとなった今、SVGを扱える事もあってWebデザインする上で再注目だそうです。
紙出身の私としては、ありがたい話です。イラレの方が慣れてますもの。

Webは進化が早くて、流行が毎年あって、勉強することが常にある分野だけど、とても面白いです。

そう言えば小学生頃だったか、
Windows95のオーサーノート（だっけ？）でイラストを描いてそこにボタンを配置して別ページに描いたイラストにリンクさせたり、隠しボタン付けたり、というPCでの遊びを夢中でやってました。
今思えばあの頃からUIを考えたりいじるのが好きなのかもしれません。

プログラミングも好きな分野だけど、好きと出来るとセンスはまた別。

もっとWebで自由に表現したい〜〜