企業実習最終日を迎えました!

こんにちは~。笹岡です(^^♪

今日は企業実習最終日です。この期間はあっという間でした。

感想を一言で表すととても楽しかったです!!(^◇^)これにつきますね。

11日間の企業実習だったのですが、本当に貴重な体験をさせて頂きました。ふたっぱの皆様には優しくお声がけ頂いたり、沢山のアドバイスをして頂いてもう本当に感謝の気持ちでいっぱいです。ありがとうございます。

 

株式会社ふたっぱ様にお世話になって学んだ事。

まずは

①photoshopを授業で使っていた頃より、断然上達したこと。

一応は授業で習ったんですが、Illustratorを扱う事の方が多かったのでちょっと苦手意識がありまして(( ´∀`;))a ha ha

ふたっぱ様でお世話になってからはバナーとサイトデザイン作成を行っていたんですが、操作性はもちろん、webサイトでの可読性や魅せ方について様々なアドバイスを頂いたので、どういう手法で行うのかとっても勉強になりました。今では扱うことが楽しいですし、画像処理にも磨きをかけたい!こんな効果はどう使うのかしら?と欲が出てきましたので良かったなって思います。こちらに来なかったらずっと苦手だったな~

 

そしてそして、

②ブログを毎日更新していくことでのメリット。

ブログは書いたことなかったのです。文章を書くこともこれまた苦手で(;・∀・)

ブログを書き始めると、言いたいことがぽろぽろ浮かんできました。すると、不思議なことに文章を構成しようと頭が回転するので、脳の使っていないところが刺激されているように思います。もう少し分かりやすく書こうと意識もしますし、何かネタは無いか考えますしね。多少は文章力は上がったと思いたい!9日しか書いていないですが(笑) 後はタイピング打ちが少し早くなったはず!(*^^)v

 

さらに、

③インプットからアウトプットすることがとても大事ってこと。

今更な感じもしますが、いつもインプットで終わってしまうことが多い自分もふたっぱ様や職業訓練校で学習して本当にしみじみ感じた事でした。

企業実習中はバナー、サイト作成も見本や参考例を見ながら真似をしながら作成するのですが、サイトのを見るだけでも色んな発見があるんです。そして作業が始まると、こんな見せ方にして、デザインはこんな風にアレンジして、アイコンはオリジナルでと作成する等、アイデアが浮かんできてどうやって操作するんかね?ってまたここでも勉強になりまして。

ブログを書くときも学習した内容を文章にしていくので自分が何をしたのかもう一度おさらいが出来て、次はどうするか目標が明確になっていくのでより取り掛かりやすいし、その後から見えるものが違ってきます。

インプットは重要ですが、アウトプットはさらに重要ですね!もう最重要!!

 

④ふたっぱ様の皆さんがとても優しかったこと

webについては初心者である私に、様々なアドバイスを頂きました。ポートフォリオもそうだし、こちらで作成した間も…忙しい中とても有り難かったです。web業界についてもお話してもらい、これからどう勉強していくか、どう就職活動していくか教えて頂いたので役立てたいと思います。素晴らしい出会いになったなと思います。

コーディングは出来なかったけれど、仕事の雰囲気も感じれたのはとてもよかったです。

皆様のバックグラウンドもお話ししてもらったので、自分もやってみようと勇気も湧きました。

自身がweb業界で仕事が出来るようになったら恩返しになるのかなと思いますので、このまま継続していきたいと思います。

ふたっぱの皆様、短い間でしたが本当にありがとうございました。

今後お会いすることがありましたらどうぞよろしくお願い致します。(‘◇’)ゞ

 

職業訓練に来なかったらこんなに気づきがなかったし、新たな発見や出会いもなかったなと思います。何より世界が広がります。私は普通に就職せずに半年間学んで後悔が全くありません。もし、お悩みの方がいらっしゃったらぜひ行動していただきたいなと思います。やってみないと分からないですからね!やってみよう!

私も頑張ります(`・ω・´)

今日までブログを読んで頂いてありがとうございました。

ホントに楽しかったですー

またどこかでお会いしましょう。それでは~さようなら~(^^)/

色、配色を考える2

今日は。笹岡です。(^^♪

企業実習も明日で最後です。あっという間でした…ホントに(´・ω・`)今サイトデザインを作成してるんですが、まだやり終えてないところがあって焦っております。この瞬間にできることを集中してやるしかないので、あともう少し頑張ります!

 

昨日のブログ内容と色と色相を考えるの続きをさせて頂きますね~。

 

昨日のおさらい

昨日の内容は

①色の持つイメージを知る事。

②明度・彩度の組み合わせを考える。

③配色を三色までに絞る。

でした。

 

①【色相】赤や青など色の種類。

色味があるものは【有彩色】と呼ばれます。白、黒、灰色は【無彩色】に分類されています。

 

【青・緑・赤】のボックスを並べてみました。

 

色のイメージはこんな風に言われていますね。

青:リラックス効果、若々しい、清潔、誠実、クールさ、爽やかさ

緑:安心感、リラックス効果、鎮静作用、やすらぎ、平和、自然的

赤:情熱的、強さ、エネルギー、注目、暖かい、購買意欲、食欲増進

この3色の全体の色調のイメージは【元気な、力強さ、生命力】と言う感じですかね。季節で言うと夏でしょうか。原色は気持ちが開放的になりますよね。

 

次に、明度・彩度のおさらいをしましょう。

 

②明度・彩度の組み合わせを考える。

【明度】明暗。明度を上げると白になり、明度を下げると黒になる。

【彩度】色の鮮やかさ。彩度のない無彩色(白・灰色・黒)、彩度のある有彩色に分けられ、彩度が高いと派手な印象に。

 

明度は、光の割合と考えたらいいでしょうかね。白に近づくとまぶしい。逆に黒に近づくと真っ暗と言う風に。

彩度は、色に濁りや、くすみが入っていくようなイメージでしょうか。

ここで先ほどのボックスを使って、

この3色に…

 

【明度】黒を混ぜると…

全体的に秋の雰囲気なりましたね!緑は抹茶、茶色は栗、青は…なんだろう羊羹?

 

【彩度】少しくすませると…

こちらは、春もしくは、初夏のイメージかな?かわいらしい色味ですが、爽やかな雰囲気もありますね。私は紫陽花を連想しました。(*^^)

 

明度・彩度を変えると色から受けるイメージが全く違いますね。

有彩色を使っても、【明度】もしくは【彩度】の割合を合わせると色は違っても、ばらつきを感じずに全体に調和が出ます。

色彩の濃淡強弱の調子。色あいの事を【色調】や【カラートーン】と呼びます。。

 

次は途中までだった配色3色のお話を…

 

配色は3色まで

 

③色相を3色までに絞るとお話しましたね。

4色以上だとごちゃこちゃしている、認識しにくい、訴えたいことの情報が分かりづらいなどあまり好まれた使い方ではないです。が、色調をうまく合わせれば華やかな印象を持たせることはできます。何より目を引きます。

色の使い方の基本を押さえると言う意味では少ない色を使って上手く表現することが大事かと思います。

そこで先ほどは色相、明度、彩度をご紹介しましたが、今度は色を3色に絞って一色ごとに使う面積の割合を変えてみます。

 

割合ごとに名前と役割が付いています。

【ベースカラー】

全体の面積の割合が高い。こちらがメインカラーになることもある。あまり高彩度、高明度な色は使わないことがあるそうです。webだと背景色や余白として考えるそうです。

【メインカラー】

印象を決定づける主要色。ベースカラーが主要色の場合は無彩色か、主要色との 差を感じさせない類似色などが良いかと思います。

【アクセントカラー】

メインカラーと真逆の色を使用することで、メリハリがつきます。

 

割合は

【ベースカラー・メインカラー・アクセントカラー = 70%・25%・5%

ですね。

ここでは青・白・黄を使います。

 

ここで先ほどの明度・彩度を使ってイメージを変えてみましょう。

青がベースカラーです。夏の青空のイメージでしょうかね?

【白と入れ替えてみると…】

白がベースカラーになると、パキッとした青色が少し和らぎますね。夏のイメージはありつつも柔らかなイメージを受けます。

【明度】黒に近づけてみました。

都会的なイメージに変わりましたね。灰色がアスファルトを連想させます。

冬のファッションで使われる色味にかな。

 

【彩度】青と黄色だけくすませてみます。

 

色どりが少し曇るとより柔らかさが出ます。梅雨の時期なイメージですかね。

白は彩度を同じ割合で下げるとメインカラーの青とほぼ同じ色味になったので変えずにそのままの色にしました。やり方間違えたかな(;^ω^)

 

明度、もしくは彩度を合わせるとまとまりが出ますし、一色だけ無彩色(白・黒・灰色)を入れると有彩色(青・赤・緑などの色のついたもの)に調和がとれます。

後は同じ3色を使っても、色の使う割合で印象がずいぶん違うので少ない色でもバリエーションが増えるなと思います。この3色までしか使わないというのは理論に基づいてるそうです。

配色のセンスがなくても、この理論を使っていくと悩まずに済みますし、ネット上にも配色を自動計算してくれるサイトや、様々な色調まとめたサイトもあるのでぜひのぞいてみて下さい。

ではまた明日~お疲れ様でした。(・∀・)

 

 

色と配色を考える。

こんにちは。笹岡です。(^^♪

今日は寒いーーー(´・ω・`)雨も降っているので余計寒いですね。こういった季節の変わり目はホントに服装に困ります。コート羽織るのも違うし…でも体調崩しても嫌だし。うーむ。

私は景色を眺めながらブラブラ歩くことが好きなんですけども、街行く人のファッションが色づくこの季節はとてもワクワクしますねー。私もあんな服欲しいなーとか、あの配色素敵だなーとか、この間は全身がオレンジに包まれた女性を目撃しまして、この人のラッキーカラーなんだろうなって気になりました。

咲いてる花も綺麗に配色されてますよね。この季節だったらパンジーにチューリップ等彩り豊かですね。

そういうことで、今日は色、配色についてのお話にしようかなと思います。

 

色や配色って面白いけど難しい。

好きな色って皆さんも幾つかあると思います。私は『青、金、白』が好きな色ですね。

他に赤も好きだし、紫も良いし、緑も素敵ですね。

職業訓練で作品作りをしていると、多数の色を使い過ぎて落ち着かないデザインになっていました。一応同系色でまとめようとはするんですけど←言い訳。ついつい色の持つ力に引き寄せられてあれもこれもってなってしまいました。それだけ影響力があるってことなんですね。

そこで配色の基本を簡単にまとめてみました。

①色の持つイメージを知る。

②明度と彩度の組み合わせを考える。

③配色を三色までに絞る。

この基本ルールを使えばあまり迷うことがなくなりそうです。

 

色の持つイメージを知る。

赤:情熱的、強さ、エネルギー、注目、暖かい、購買意欲、食欲増進

青:リラックス効果、若々しい、清潔、誠実、クールさ、爽やかさ

緑:安心感、リラックス効果、鎮静作用、やすらぎ、平和、自然的

黄:活発さ、好奇心、開放感、明るさ、希望、カジュアル

ピンク:女性的、ロマンチック、優しい、華やか

白:清潔、純粋さ、軽量色、美しさ、神聖

黒:高級感、ゴージャスさ、力強さ、知的さ

紫:高貴、優雅、魅力的、非現実的、霊的、神秘

 

等、色のイメージは一色だけでもたくさんあるんですね。色を使う時にどんな印象を持つか考えながら配色を考えるといいですね。

 

明度と彩度の組み合わせを考える。

明度:明度とは色の明るさ度合い。明度が高いと明るくやわらかな印象。
明度の差が大きいとコントラストが高くなり見え方がはっきりする。

 

  • 明度が高い→明るい色、白に近づく
  • 明度が低い→暗い色、黒に近づく

 

彩度:彩度とは、色の鮮やかさの度合い。 彩度が高ければ高いほど目を惹く効果がある。

  • 彩度が高い→ビビッドで鮮やかな色味
  • 彩度が低い→落ち着いた色味、無彩色

明度と彩度は混乱してしまいそうですが、慣れれば使いこなせますね。

 

配色を三色までに絞る。

配色する時の色を三色にした時、色使いの割合を変えるとまとまりが出ます。そして色の役割を割合に充てると、印象付けを強調できます。

ベースカラー・メインカラー・アクセントカラー=70%・25%・5%

ベースカラー:

全体の面積の割合が高い。こちらがメインカラーになることもある。あまり高彩度、高明度な色は使わないことがあるそうです。webだと背景色や余白として考えるそうです。

メインカラー:

印象を決定づける主要色。

アクセントカラー:

メインカラーと真逆の色を使用することで、メリハリがつきます。

 

ちょっと具体例がないので、明日のブログに書きますね。

今日はまとまらなかった。また明日~

今日もありがとうございました。(・∀・)

 

 

 

鏡面と言う効果を覚えました。

こんにちは。笹岡です。(^^♪

今日は肌寒いですね。土曜日は湿度があってちょっと暑かったのでこのまま暖かくなっていくなあと思ったんですが…

気温が変わりやすいので体調には気を付けないといけませんね。私は今のところすこぶる元気です。

今日もサイトデザインの作成をしています。和菓子の画像に影を付けて立体感を出そうと取り組んでおりました。Photoshopはの操作も徐々に慣れつつあります。結構楽しいですね。後は色んな技を覚えていく事だなと思います。

今日は鏡面と言う効果についてご紹介したいと思います。

 

鏡面と言う効果とは…

鏡面とは文字や画像が水面や鏡面上に反射して映し出されることと言えばよろしいでしょうか。

この画像だと…

一升瓶が鏡面反射して影ができていますね。

鏡面の効果を使うと、画像に立体感が出てより奥行きが出ます。

では早速やってみましょう。

 

 

鏡面を自分で作ってみる。

まずは鏡面の効果を作りたい画像を用意しまして、画像はあらかじめくり抜いておきました。

あ、一応和菓子です。

メレンゲで出来てるんでしょうか?シュワってなくなるんでしょうかね。お化けさんにご協力いただきます。

では、作ってみましょう!

 

このお化けの画像をレイヤーパネルで複製します。

②次に、コピーしたレイヤーを選択して、

『メニューパネルの編集』から『変形→垂直方向へ反転』を選びます。

③反転したら、元画像の上に反転したコピー画像が重なるので、このコピー画像をずらして元画像と反射しているように並べましょう。

 

 

ちょっと奇妙ですね…まあいいか(;^ω^)でも可愛い…

④コピーしたレイヤーにレイヤーマスクをかけましょう。

このレイヤーマスクに鍵カッコのようなマークがついてますので、このままマウスで選択します。

次にグラデーションを付けます。

⑤グラデーションツールを選択して、メニューパネルが変わりますので、『種類を黒、白』、『グラデーションの形を線形グラデーション』を選びます。

⑥『マウスが十字キーに変わります』ので、『反転した画像側からshiftキーとマウスで同時に元画像のデータの上部までドラッグ』します。

グラデーションを引くときの不透明度は、『原点が0%→終点が100%です。』

すると!

 

 

こんな感じです。出来たー嬉しい!!

グラデーションを引くときの始点をずらすと、鏡面の幅が狭くなります。コピーしたお化けの腹部あたりから引いてみたら…

やんわりとグラデーションになっていると思います。こっちの方がお化け感が出てるかもしれません。(*´ω`)

この効果を使ってレイヤースタイルの効果も付けてアレンジすると楽しいかもしれませんね。ちょっと私にはそこまでの技術が…(笑)また練習してきます。web上にも沢山色んなやり方が載っていますのでチェックしてみましょう!

今日もありがとうございました。また明日~(・∀・)

 

 

 

デザインを学びだして気が付いた事。

こんにちは。笹岡です(^^♪

今日は雨が降っていますけども、気温が高くなってきたのでとても過ごしやすくなりましたね。3月は最後の方まですごく寒かったのに嘘のようです。あんなに寒かったのに。

ブログを書き始めて今回で5回目になりますが、私はブログを書いたことがありません。そして何より文章を書くことはすっっっっっっっっっっっっっっっっっごく苦手です。インターンブログの先輩方の内容拝見すると、webについての知識に長けていらっしゃていて、ブログの書き方も上手でとても勉強になります(`・ω・´)。

拙い文章ですが、読んでいただける方がいるとこれ幸いです。こういう機会を設けて頂いたふたっぱさんに感謝です。

今日は最近感じたことを書いてみようかなと思います。

 

職業訓練に通いだしてみて

職業訓練に通う前まで、私は今までやってきた経験を活かして同じ職業に就こうかなと思っていたのです。なのでwebやグラフィック系の仕事には多少興味はあったものの、経験ないし、年齢も微妙だし、まあ夢のまた夢かみたいな最初からあきらめモードでした。

が、知人から『せっかくの機会だし行くだけ行ってみて合わなかったら、就職したらいいんじゃない』と言われて今に至っています。結果的に来てよかったです。鶴の一声が無かったら私はふたっぱさんでブログを書いてないですもんね。

学校にはデザインの授業やwebの授業を受けましたが、授業自体と言うかやっていることがクリエイティブな事なので、すごく頭を使います。久しぶりに勉強するということもとても新鮮さがあって新しい知識や考えがどんどん脳に入ってきます。

illustratorやPhotoshopを一通り学んだら、作品を作っていくのですが、最初は名刺・ロゴマークから始まって、架空のクライアントから依頼を受けて商品ポスターや、旅行パンフレット、パッケージデザイン、チラシ等制作しました。

4か月間のうちに7作品ほど製作したので思い返すと、こんなにいろんなことをやったのかと感慨深いのと、当時は完成品に満足をしても今見返すと、

(;^ω^)え、なにこれないわー

とか、

Σ(゚Д゚)これは表に出したくないなー

とかとか、まあ色々手直しが必要になってきます。クリエイティブな仕事って大変です。クライアントさんからOKもらえないといけないわけですからほんと自分はまだまだやって思います。

そして、講師の方の考え方もみんな違って面白いですね。プロの方の意見を頂けますし、考え方一つじゃないので縛られずに柔軟に吸収していました。

たまに真逆のことを言われると困惑はしますが、そこはいいとこどりで(笑)

さらに、一緒に学ぶ生徒さんの作品も見る機会があるので、すっごく刺激になります。このデザインいいなとか、このアイディアでくるとは…とか、同じ課題でも表現の仕方が違うので面白いですね。

 

デザインの授業を受けていると…

学校に慣れてきたころ私が一番驚いたことがありました。

それは、

日常生活でも頭が創造的に考えるようになったこと。

 

料理を作る時も、レシピをただ真似てしまうだけでなくて、アレンジしてみようと積極的に考えるようになったり、毎日着る服の組み合わせも変えてみたり、気になったことはメモを取ったり、絵を描いたり、やってみたことがないことに挑戦しようと思ったり…

とにかく新しいことを吸収しようとする意欲が増えました。

講師の方が仰っていたんですが、『デザインの授業を受けると頭が嫌でも創造的に考えるようになって、自然と日常生活にも反映されるよ』

ホントにそうなっちゃいました、先生。

もうすぐ企業実習も終わって学校も修了式を迎えますが、後退しないように持続できればいいなと思います。無駄にしませんように(・∀・)

 

企業実習を受けるとさらに…

実際に企業様でお世話になっているので、現場はこんな雰囲気で作業はこういう事やっていてと肌で感じるので、学校で受ける刺激とは全く違います。

私はwebの知識に疎くて初心者レベルです。現在サイトデザインを制作中ですが、要素の余白の取り方や配色のルール、画像、フォントの効果の有効性など学ぶことが沢山あって目からウロコです。photoshop苦手でしたが、使い方が分かるとすごく楽しいですね。また新しい世界に触れてとてもいい機会に恵まれているなと思います。

それから色んなサイトを細かく見るようになったこと。こんなところに余白が!文字に影がこのフォントの雰囲気がサイトより良くしているなとか…

ふたっぱ様、こんな初心者を受け入れて下さって、本当にありがとうございます。まだ最終日ではないですが、最後まで頑張ります!

ブログを書き始めて、デザインを学んで自分の考え方が結構変わってきているなって思います。それにどちらも自分の気持ちを表に出す作業なので、自分を知るにはとても重要なことだと感じました。自分が変わっていく事はとても楽しくて面白いし、自身もより肯定できて成長も感じれるのでちゃんと生きてるなーって思います。(笑)

なんかうまくまとまらないのですが、この辺にしておきます。今日もありがとうございました。また来週~(・∀・)

 

 

 

 

 

 

 

 

 

デザインサイトを集めたまとめサイトのご紹介。

こんにちは。笹岡です(^^♪

ふたっぱさんでお世話になって6日目です。早いー!!もう折り返し地点ですね。残り5日間もしっかり勉強していきたいと思います。

近くに公園があって、大阪に来た時からこの公園が好きで今は実習先から近いので散歩がてら通っています。自然豊かな公園増えて欲しいなあ(*´ω`)

現在はサイトデザインに取り組んでいます。テーマは自分で決めていいとのことだったので、和菓子にしました。和菓子の画像をフリー素材から拝借しているんですが、どれもおいしそうで特にこの時間に見ると辛い…なんで食べ物にしたんや…

 

サイトデザインをするにあたって

私が職業訓練校に通っていた頃、グループ制作の課題としてWEBサイトを作るというものがありました。架空のクライアントから依頼を受けて制作するのですが、日程が約2週間あるかないかで通常の訓練より日程が少なく凄く大変でした。

5人のメンバーでサイトデザインからコーディング、クライアントに中間と最終のプレゼンテーションも組み込まれていて中々いい経験が出来ました。プレゼンテーションは資料も用意するし、クラスの人と先生方と学校の偉い方にも見てもらうのですごく緊張しました。こういう機会って仕事で経験したことがなかったのでとても勉強になりましたね。

今回は和菓子屋さんのサイトなので和菓子屋関連サイト、食品系、和菓子とは関係のないサイトも色々覗いています。

和菓子屋さんのサイトを幾つか閲覧していると色んな表現の仕方がありまして、高級感を打ち出したり、歴史があるので社会的に信用があると印象付けるものだったり、シンプルに商品を紹介して多くの情報は載せずに、商品の印象からサイトを作成しているものと幅が広いです。

そして、作ってる商品も同じ名前の和菓子でも全く雰囲気が違うので、客層のイメージがつかめて面白いです。

 

参考にしたデザインサイトのまとめサイト

私が参考にしているデザインサイトのまとめサイトをご紹介します。

1.MUUUUU.ORG

こちらのサイトは国内・海外問わずカッコイイ、おしゃれサイトが沢山あります。職業種の幅も広いですし、デザインもフラットデザインから、かわいい、イラストを使った、フォントに特徴あるなど、細かくカテゴライズされています。

個人的にこのサイトさん自体おしゃれだなと思います。カテゴリーが左側にあってクリックすると項目が出てくるとことか結構好きですね~カッコイイ。

2.bookma! v3

ページのトップにゴリラが逆さまで挨拶してくれています( ´∀` )ノ

こちらのサイトも国内外問わずですが、面白い特徴がどんな配色をしているのか、色の種類に分けてページを集めています。背景カラーっていうカテゴリーもありまして…そこまで分けるんかい(笑)

新しい順、古い順と検索もできるので時期的にどんなものが流行ったのか見てみるのもいいですね。閲覧数順っていうのもありますよ。

3.RWD JP

こちらはレスポンシブサイトに特化していますね。

PCサイトをスマホやタブレットで閲覧する際や、ブラウザーによって変わるサイトのサイズ感に対してコーディングで設定がなされているwebサイトを集めています。国内サイトに限りますが、業種別になっているのと、端末やブラウザによって表示がどう変わるのか画像で示してくれています。とても参考になりますね。

 

他にも色んなまとめサイトがweb上にまだまだ沢山あります。webの授業を受けていなかったら、余り覗くこともなかったと思うので新しい発見が日々あって楽しいです。暇な時間に閲覧すると面白いサイトに行き当たるかもしれません。これコーディングどうやってるんだろー( ゚Д゚)とか検証したりしてます。

今日もありがとうございました。また明日~

 

 

 

バナー制作をしました!

こんにちは!笹岡です。(^^♪

今日は曇りですね。桜が咲いてきているので、雨で散らないで欲しいなと思います。

ここ二日ほどブログを書いていませんでした…すみません。

今日は二日間で作成したバナー制作のお話しをしたいと思います。

 

バナー制作

二日間のうち、一日半はインターンシップブログのバナー制作をしていました。

Illustratorで書き起こして出来た初代作品が、こちら。

ふむ…

べったりしてて何とも言えない。全体的にもっさりしていますね。

自分で振り返っても(;^ω^)ナンジャコレハ…

おそらく春だし、植物たちも活き活きしだして実習先もふたっぱさんだし、新しい気持ちで緑使っちゃえーって心意気だったと思います。

うーん、これは流行りのフラットデザインと言ってもちょっと通じないですねぇ。そもそもなんで、Illustratorで作ったし! バナー作るんよな?webだよね?photpshopは使わないのか?何だあのフォントの黒は。緑の活き活きさを書き消してるではないか!

Illustratorに逃げてしまいました。photoshopが苦手である事が露呈されました。

 

画像配置してみた

画像配置してフォントの種類を変えてみたらどう?と実習先の担当者さんにこんなデザインにしたかったんじゃない?と提案されて見本で見せてもらったのがこの二つのデザイン。

その発想はなかった!思わずニヤリする目からウロコなロゴマーク8選

2015〜2016年のWebデザイントレンドまとめ(後編)

カッコイイー|д゚)!!シンプルだけどオサレ!

こちらの意図が手に取るように分かるなんてすごいです。笹岡もこういうバナー作りたいデス!という訳で提案頂いた2作品より作ってみた2代目が、こちら。

ちょっとコツ掴めたかな?画像が背景に入ると印象が変わりますね!

この画像は光が溢れるような雰囲気で水玉が配置されています。なので奥行きと双葉マークが活き活きしてるように見えます。このバナーは個人的に好きです。が、

色に苦戦した。またお前か…

背景が白に青を持ってきても、暗いところだとまた見づらい。どうしたものか。

 

photoshopで使えるレイヤースタイルと言う効果。

文字に影を付けて浮かび上がらせたり、光彩を付けて暗い配置場所でも文字が分かるように差別化出来たりと何かと便利なレイヤースタイルも、授業を受けたとはいえ余り使えていなかったというか忘れていました。すみません、先生方。

改めて実習先で教えて頂いて、バナーサンプルを使ってコピーをして学習していると、webでの可読性は印刷物とは全く違う事だと理解しました。

これがコピーしたバナー見本です。

『つるつる♪』ってめっちゃ難しいー!!全然ノリノリじゃないし!このキラキラした円はどうしたら出せるんじゃいっ!

試行錯誤しながら、真似していくと、表現がとても多彩で、文字なんかも傾けさせたり、字下げしたり、大きさ変えて強調させているんですね。

いかに小さいスペースの中に重要な項目を一目で認識させるか、可読性を身をもって知りました。

ハートも手強かったし…。ぐぬぬ。

 

バナー完成版

学習出来たところで、もう一度再構築してみた完成版がこちら。

デザインの雰囲気は変わりましたが、ドロップシャドウなどの効果やフォントの種類を変えたり、色は画像の雰囲気から明度、彩度、色相がまとまるよう意識して作ってみました。

なかなかよいできかなと自負しております。(´ω`*)

バナー制作は大変な作業でしたが、出来て良かったのと新しいことを学べたのと、ホントにたくさんの気付きがあったのでとても満足しています。

これを機にバナーに注目してコピペしてみようと思います。中々面白い作業でございました!

今見たら間違えてるところ発見してしまいました。皆さんは分かりましたか?

今日もありがとうございました!ではまた明日~

WEB学習初心者に見てほしいサイトの話。

皆さん、こんにちは。笹岡です(^^♪

今日の天気は雨ですね。大阪は桜が開花したばかりなので雨でちらなくてよかったなと思います。
私は生まれが高知なので、晴れの日が多くて日照時間も長い高知の空が好きなんです。快晴は最高ですね!

最近は、雨が降るとマイナスイオンの影響か気持ちが穏やかになるので雨の日もいいなと思うようになりました。
明日は晴れのようなので、最近購入した自転車でサイクリングに出かけようと思います!
今日はドットインストールというサイト教えて頂いたのでご紹介をしようかなと思います。

ドットインストールとは?

ドットインストールとは、はてはて何だろうか。

その前にWEBサイトの構築に置いてHTMLとCSSは基礎中の基礎であり、これがないと始まらないものでありますよね。

私は、職業訓練でWEB授業が始まる前まで、HTMLとCSSですら何なのか全くわかっていなかったです。ド素人です。1ヶ月しか授業ないからついていけるのか、うーむ(´・ω・`)といった具合です。
約2ヶ月前までそんな気持ちだったな~ 懐かしい…
HTMLはサイトの構造をコードと呼ばれる文字で羅列して、構築してしまうものです。

CSSはそのサイトの装飾、デザインを指定するものです。
家を建てるときの家の骨組みとか、何階建てとか、部屋割りとか、大まかなところをバスルームこの辺でとかはHTMLで。
部屋の内装とか、キッチンどんな形にするとか、テレビの配置はどの辺にしようかしらとかはCSSで。
と言えばいいんでしょうか。これであってるのかな…
このHTMLとCSSをインターネットで調べて勉強できてしまう!しかも動画付きで!一部有料だけど、基本無料で学べてしまう
素晴らしいサイトがドットインストールです!!

早く出会っていたかったー(泣)
でも今日から学習出来る!
本を見ても理解が進まない、実際のところどんなものなのか知りたいという初心者の方にはピッタリですね!

ドットインストールで学べる事

やっと本題に。

先ほども申し上げた通り、HTMLとCSSはもちろんの事、JavaScript、jQueryや、データをあずけるサーバー環境、
スマホアプリ、ゲームプログラミングなど幅広く学習出来ます。

目的別で学習出来るのと、項目ごとに動画が案内されていて、大体が3分以内で終わってしまうので、さらっと勉強できます。
動画を閲覧中に下部で音声を文章化してくれるので、今何て言ったのか分からない時はすぐに文章を追えばいいです。
もちろん、動画は何度も閲覧できて、自分がどこまで学習したかカウントしてくれるので至れり尽くせりです。

ユーザーに使いやすいように考えてサイト作ってくれてるんだなーと感動すら覚えます。
出てくる言葉は参考資料とか、別の閲覧サイトを見て学習しておくと尚良いですね

ドットインストール様ありがとうございます。お世話になりやす!

WEBを学び始めて感じた事

初心者レベルなので最初は何をしているのか全く分からなかったです。
毎日呪文唱えて、新しい呪文覚えて、気分は魔法学校に通うハリーポッターでした。
不思議なことに文字を打ち込むと、サイトページとしてきちんと形になる。当たり前の話ですが。
数学を学んで答え合わせしている感覚がとても楽しいです。

私は学校でグループ制作としてWEBサイトを作っていたのですが、こんなサイトデザインで、こんな動きをしてなどみんなでアイデアを出し合って、困難乗り越えて作品を作ったので、大変な作業でしたが、完成した時はすごく嬉しかったです。

全く未開の学習をするのはとっても面白いですし、脳が刺激されて良いですね。
WEBサイトを作ってみたい方はぜひ挑戦してみることをお勧めします!

今日から学習していきます~!!

ご挨拶と自己紹介。

初めまして。こんにちは。

本日より職業訓練の実習生として株式会社ふたっぱ様でお世話になる笹岡と申します。
実習期間は11日間です。
短い期間ですが、多くの事を吸収して今後の人生に活かしたいと思っております。

ふたっぱ様は年間150~200程のサイトを制作されている会社様です。
ご多忙の中、受け入れて下さってありがとうございます。
アットホームな雰囲気で緊張しいの私も心がほぐれています。

11日間どうぞよろしくお願い致します。

 

自己紹介

私の経歴を簡単にご紹介します。

地元の高校卒業後、ファーストフードで約7年、カフェで接客と製造、ホテルの宴会場をおもにサービス業に関わってきました。
サービス業はありがとうと面と向かって言ってもらえるお仕事です。自分のしたことが相手にとって嬉しいことであったり、ほっとしてもらえたり…。辛いことがあってもこの言葉で乗り越えてこられたと思います。

ただ接客よりも、製造はもっと楽しかった。
ファーストフードはハンバーガー他、カフェはベーグルが売りのお店で朝早くから、約十種類のベーグルを焼きます。ベーグルは焼成する前にお湯にくぐらせてつやを出します。
自分たちでメニューを考えることもありました。
誰かに言われてする仕事ももちろん喜びがありますが、自分の考えが反映され形になることがとても楽しかったし、大変やりがいを感じました。

その後、地元を離れて大阪に暮らし始めました。2013年の2月22日のネコの日です。

大阪に来て携帯販売の仕事をしていましたが、退職し、しばらくのんびりと過ごしていました。このまま接客業を続けるのか、それとも全く未経験の職業に就きたいのか。だけども、技量も知識もないし、やっていける自信もない。
そんな時、ハローワークで職業訓練という短期間で学習出来る講座があることを知りました。

職業訓練でグラフィック系の学校に行こうと思ったのは、小さいころから絵を描くことが好きなこと、 ファッション雑誌や漫画をよく読んでいたこと、インターネットのサイトデザインを見たりすることが 楽しかった影響で、自分にもこういった仕事に携われたらいいなと漠然と考えたからです。

 

職業訓練

私が通っている訓練校は6か月間の訓練コースで、グラフィック・印刷物を学ぶクラスを約4か月半とWEB学ぶコースが約1ヶ月半で学ぶことが出来ます。
職業訓練では年齢も経歴も考えも違う方を持った方々と出会いますし、その環境が刺激となって新しい自分にも出会ったような気がします。

講師の方からある言葉を言われました。それは、

『デザインとはまとめること』

自身のしたいことをたくさん詰め込んでしまっても、出来上がったものが相手に伝わらないものだと一体誰の為に作っているのか分からない。迷ったら、一度引き算をしてまとめてみなさい。と講師の方はおっしゃっていました。

また印刷物の制作、WEBサイトの制作を行うことで自分の得意な事、苦手な事、何が好きなのか、何が嫌いなのかが作品を通して浮き彫りになり最終的に自分の強みに変わります。
自分の進みたい道が表れてくるようでとても楽しいです。

企業実習で学びたい事

まずは実際どんな作業風景で進んでいくのか。
そしてサイトデザインやコーディングももちろん、デザインするためにはどんな情報が必要なのか、
見る方にとって興味を持ってもらえるサイト作りを目指すにはどうすればよいか、
11日間で少しでもコツがつかめたらいいなと思います。
大阪は本日桜が開花しましたね。
私も新しい気持ちで頑張ります!!