全力で生きよう
昨日感じたこと。自己主張かっこ悪いとか思ってた自分がバカだった。
というかそれまで自分が人前で主張するのは苦手だ、恥ずかしいと思っていることは知っていたけれども
自己主張かっこわるい、という想いから恥ずかしいと思っていたんだと気づいて何言ってんだこいつと思った。
それからもう一つ。内に込めてる想いは外にぶちまけなきゃ誰も気づかない。
言ってくれなきゃ人はわからない。表現してくれなきゃ人には伝わらない。だって人間エスパーでもなんでもないんだから。
なんでそんな当たり前のこと今まで無視してきたんだという話。
そう感じた経緯。
今年から私デザインスクールに通い出したんです。
んで、昨日とあるデザイン講座受けてきました。
登壇された方は、誰もが知っている大手化粧品メーカーのアートディレクターさん。
そんな方に会える機会なんてまず滅多にない。ましてや話せる機会なんてそうそうないだろう。
出てみたら、生徒たちもそのことをしっかりわかっていた。
自分がどういう人間か課題を通してしっかり主張してくる。限られた時間で自分をぶちまけてる。そして、その講師の方に自分を覚えてもらおうと必死だ。
それを見て、私は完全なる敗北を悟った。ただの授業と思っていた何日か前の自分をぶん殴りたい。
講義が終わった後、その方と名刺交換したりお話ししたっり自分がどういう人かを最後の1秒でもいいから伝えようと動く人たちを横目に
課題しか用意していない何も切り札も武器も持たない丸腰の私はさっさと帰ってしまった。
どうしようもなく悔しかったのだ。今まで自分が人見知りな人間であることを自分で勝手に許して、自分がどういう人間でどういう強みがあるのかを整理しておらず、全ての瞬間がチャンスなんだっていうことに気づかず自由気ままに生きてきた自分に腹が立った。
そんなことを昨日考えながら、家路に着いた。
1日立った今の私。
なんか吹っ切れた。
昨日家に帰った後、煮え切らない気持ちを抱いたまま私は自分の好きなファッションイラスト制作をやった。
好きなことに集中して、自分の気持ちを落ち着かせた。
結果それは上手いこといって、自分の満足するものが出来上がり（もちろん課題も見えたが）、
インスタでもそこそこ反応もらえて、私は吹っ切れた。
そしてこれからどうあるべきかわかった。
自分を包み隠さずに行こう。
そのためにいつでも自分の好きなことや興味のあることにはむき出しの好奇心をぶつけ続けていよう。
イラストを描いていて、私が今回失敗したのは何も準備をしていなかったことだけだと気づいた。
私には、すでに自分を主張できるだけのものは持っていた。自分を主張できるだけのことはしてきた。そして、今まさに自分を主張できるだけのことをし続けている。
私に必要なのは、それらをちゃんと表にわかるように出す準備を整えることなのだ。
そして、今まで以上に自分が自分だと言えることをし続けること。今よりも増して、貫き続けること。
それがわかって、私は無事吹っ切れた。
去年の後半、スクールに行くか行くまいか散々悩んだけど、結果的に良い選択をしたと感じている。
もとが引きこもりがちで気をぬくと視野が狭くなる私にとって世の中にはもっといろんな人がいるということを知れたということだけでも大きなプラスだった。
今の最大の敵は自分。
私は私に負けたくない。
全力で生きよう。
そう思った。
結果を出すためのセルフマネジメント、を考えた
年の瀬っていろんなこと考えますよね。
主に今年の反省とか、来年の抱負とか。
これって人間のメランコリー好きの表れなんじゃないかと思うくらい。
私も世間一般の例に漏れず考えてました。
主に結果を出すためのセルフマネジメントについて。
言うてもかれこれ２０年以上自分との付き合いあるんで、
どうやったら私は結果出せるのかというのがようやく見えてきたんですよ。
私の場合、三日坊主で、面倒くさがりで、でも一度集中しだしたらやりきる猫型体質なんで
どうやったらとある目標を達成できるかなあ〜って、来年への準備も兼ねて考えてたんです。
ポイントは、ちょっと頑張ればやれそうという活路を見出すことでした。
とにかく面倒くさがりの部分をどうにかすれば三日坊主は克服できると思ってるんです。三日坊主って、結果としての私の姿であって、その結果の原因が面倒くさがりなので。
なので、その面倒くさいを追求してみると、「余裕があるときにすんごーくパワーがいりそうと思ったらまず拒絶反応する」ということなんですよ。
だったらと考えたのが二つで、常に自分を追い込むように目標にリミットをつける、ということと、
目標のとっかかりを簡単なものからにするということです。
んで、前者はすでに失敗してるんです。リミット儲けても無理だと感じたらそのリミット私が無視するので。それくらいのメンタルの強さしかプライベートでは発揮できないとわかったので、これはなし。
じゃあ、とっかかりやすい方法をかんがえつくか、目標となることがマルチタスクなら、とっかかりやすいことから取り組むという方法でやってみようか、と。
最初の特徴で述べたように、私は一度やり始めたら集中力はあります。これは人からも評価されたので間違いない。
だから、とっかかりのハードルを下げてあとは勢いに任せるスタイルがよいかもと思ったのです。
そしてその実証実験をしたのが、まさにこの記事です。
私さっき来年の目標を考えながら、「このブログの更新も定期的に行えるようになりたいなあと思ったんです。
で、自分に毎日何時間！とかリミットつけても達成できないのはすでに経験済みだったので、だったら別のアプローチ方を考えました。自分が面倒と思わず、気づいたら目標達成しているやり方。
私は、結構日々何事かを考えています。
自分が感じたものだったり、経験したことだったりを、自分なりに深めて考えているということを、1日に1回はしてるんです。
もうこれは昔からの妄想癖というか分析好きというか好奇心というか、そういうのが功を奏して。
「じゃあ、自分が気づいたらやってるこの考える事すらも記事として載せて仕舞えばいつの間にか更新につながるんじゃない？」と、考えついたのです。
ここ最近まで、このブログはweb中心のことを書こうとか、勝手に自分の中で制約を設けてた。
今まで、自分の考え癖を頭の中で終わらせていた。
その二つの慣習を一旦壊して、やり方を変えてみよう。
そんなセルフマネジメントを試みた結果がこの記事です。
実証実験1回目ではありますが、成果は見込める可能性ありですね。
セルフマネジメント、本屋とかでビジネス書とかで置いたりしてますよね。
でも、あれってページ数重ねるほど難しいことじゃないとは思うんです。
自分のやりたいこと(目標)をもつ、自分の性格を知る、そして、やりたいことを達成するために考える姿勢を持つ。
この三つのことを要はやってるんです。
まあ言うは簡単、やるのは難し、というやつかもしれませんが
私みたいな若造でも、やろうと思えばできることなんだなーと感じたので。
とりあえず、次に記事書くときはキーボード使お。
(iPadで二本指打ちでめちゃくちゃ疲れた模様)
【独学でWebデザイナーになった人の記事紹介付】未経験者が１個レスポンシブサイトを作ってみてわかったこと
どうもこんばんは。
最近はL'Arc〜en〜Cielのアルバム聴きながら脳内でヘドバンしてます。
今現在私は「HTML5＆CSS3 デザインブック」を教科書代わりにレスポンシブサイトの勉強をしています。
書店のWeb関連のコーナーをのぞいたり、アマゾンで関連書籍をさがしてみると数多の本がある中で
何故これを選んだかと言うと
結構、未経験者からWebデザイナーになった方のブログなどで紹介されていることが多かったからです。（当社比）
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (5件) を見る
私は10月にWebデザイナーに転職することを決意した初めのころ、
専門のスクールに通おうかなと思っていましたが
様々なお話を聞いたり、考えた結果、（主に金銭面が原因で）独学で頑張ってみようと決意しました。
どうしてもスクールって、就職率の数字が出ているところがなかったので、
ここなら安心できる、というのが、イマイチ見つからなかったんですよね。
なので、それよりも実際に独学からWebデザイナーになった人の話を参考にしたほうがずっと説得力があると思い
スクールを断念した後、色々そういった方たちのブログ記事をあさりまくったんです。
それで今月は、こいつ1冊とにらめっこしながらサイトをとりあえず一通り作ってみようと制作中なのです。
１個レスポンシブサイトを作ってみて感じた3つのツボ
で、実際に本をもとに一個作ってみたわけですが
レスポンシブデザインってここを押さえておけばあとは応用だなあと思いました。
１．ページをbox単位で見る視点
正直ページレイアウトはboxのパズルゲームだな！と思ったのが感想。
実際この本の一番最初の章で扱ってたのは基本的に「boxでどうページを組み立てるか」の説明でした。
その基本編を終わった後に実際にページを作る章に入っていくのですが、作ってみるとその意味が深く理解できます。
なのでページレイアウトを考え、実際にコードに落とし込むときは
「ゴールのレイアウトを表現するには、どうやってbox分割してあげればよいか？」を考える作業がとても重要になってきます。
２．display、floatの理解
まあこれは1番目のboxのレイアウト視点が大事だからこそ、ということではあるんですけど
boxベースでレイアウトを扱う上で、この二つの理解はおろそかにはできないです。
何故displayをblockにしたらレイアウトがうまくいくか、とか
floatを指定するのはいいけど結局どういう仕組みで左行ったり右行ったりできるの、とか
レスポンシブサイト創るにあたって仕組みレベルでまず理解すべきはまずこの二つだなと感じました。
この二つに関しては、後日自分の復習のためにも記事としてまとめたいと思います。
３．paddingとmarginを使ったページレイアウト調整力
ページが違和感なくきれいに見せるためにはこれは不可欠。そう感じました。
この本での勉強に入る前に自分で何個かページレイアウト練習につくったときも感じていましたが
レイアウトが崩れるのもレイアウトがきれいに整うのも、すべてはpaddingとmarginを操れるかどうか！にかかっています。
なのでboxレイアウトを行うにあたってbox内でのpaddingとmarginのルールは理解必須です。
（以前boxレイアウトでぶち当たったときに書いた記事の内容とか特に重要でした）
独学でWebデザイナーになりたい人向けのおすすめ記事
…とまあえらそうに講釈たれてるようになってしまいましたが、
まだ１冊は終えていないので理解が抜けてたり慣れていなかったりすることは多々あるのですが
今月の終わりは今度はフォトショとイラレ練習のための本に取り掛かるスケジュールなので、たゆまず残りの分も読んでまた作っていきます。
最後に、私が「この人の記事はまた参考にしよう！」と思った方の記事を紹介します。
あとでFeedlyにも登録しとこうっと…
yamasha.net
www.designmap.info
tsukuruiroiro.hatenablog.com
□「Webデザイナーになるには何すればいいか？」という一番初めの疑問にぶち当たったときに参考になりました。
どれも簡潔にまとまってるので計画が立てやすくなります。
□上の二つの記事を読んで、何をやるかは決まった！じゃあ具体的に目指すべきゴールは？と考えたときに参考になります。
blog.cntlog.net
kuraokura.xsrv.jp
□紹介しているサイトが役に立つものが多いです。
また、実際にWebデザイナーってどういうことやるのか、何が必要なのか、についてのお話は業種未経験者にはありがたいです。
個人的な今の気持ちとしては、早くフォトショ＆イラレ練習用教科書に取り掛かって、ばんばん模写をやりたいという気持ちが高まってます。
いずれにせよ年内にはどちらも終わらせたいので、これからも日々積み重ねていこうと思います。
【Woekshop】Web Design/Layout編「ベーシックカラムレイアウトのサイトを作る」追加しました
ワークショップサイト更新しました。
今回は、Web Design/Layout編の「ベーシックカラムレイアウトのサイトを作る」のお題目を元に
よくサイトで見かけるような基本的なレイアウト5種類を一枚っペラページで作ってみました。
」
仕事でタグを操作することはあるので、レイアウト組みはそんな難しくないだろうと思っていましたが、
CSSでちょこちょこつまずきました。
floatを扱う際のカラム落ち、幅と余白とのバランスの考慮はあまり業務で直面してこなかったので
この機会にいい勉強になりました。
良ければお立ち寄りください↓
boxのwidthをパーセント指定して扱うとぶち当たったよくある落とし穴
どうもです。
天気良い日は部屋から窓の外の青空を見てるのが好きな引きこもりです。
1カラムレイアウトで一つのボックス内にボックス二つ並べたろーとwidthをパーセント指定しながらコーディングしていたら
なんだかうまくいかない現象にぶち当たったのでちょっと調べてみました。
結論から言うと、boxレイアウトするなら知っておくべき基礎的なことでした。ぶちあたってよかった。
横並びにならないboxのCSS指定とその対処法
【HTML】
<div id="sub"> <div id="sub1"> <ul> <li>side bar1</li> <li>side bar2</li> </ul> </div> <!-- / #sub1 --> <div id="sub2"> <ul> <li>side bar1</li> <li>side bar2</li> <li>side bar3</li> <li>side bar4</li> </ul> </div> <!-- / #sub2 --> </div> <!-- / #sub -->
【CSS】
#sub { color: #fff; width: 830px; background: #F36; padding: 15px; margin-bottom: 10px; } #sub:after { content: ""; clear: both; display: block; } #sub1 { float: left; width: 50%; padding: 10px; background: #F36; } #sub2 { float: left; width: 50%; padding: 10px; background: #F36; }
これでイメージ的にはsub1とsub2が横に二つトントンと並んでくれるだろうーと思ってブラウザ立ち上げたらこうなりました。
(゜ω゜)？
「あれ…？幅50％ずつ指定だから綺麗に二分割されるんじゃ…？なんでカラム落ち…？」とちょと悩みましたが、
CSS見ていたらなんか怪しいところあったので修正してみたのがこう。
【HTML】
<div id="sub"> <div id="sub1"> <div id="paddingSetting"> <ul> <li>side bar1</li> <li>side bar2</li> </ul> </div> <!-- / #paddingSetting --> </div> <!-- / #sub1 --> <div id="sub2"> <div id="paddinfSetting"> <ul> <li>side bar1</li> <li>side bar2</li> <li>side bar3</li> <li>side bar4</li> </ul> </div> <!-- / #paddingSetting --> </div> <!-- / #sub2 --> </div> <!-- / #sub -->
【CSS】
#sub { color: #fff; width: 830px; background: #F36; padding: 15px; margin-bottom: 10px; } #sub:after { content: ""; clear: both; display: block; } #sub1 { float: left; width: 50%; background: #F36; } #sub2 { float: left; width: 50%; background: #F36; }
sub1とsub2のpaddingとっぱらいました。そもそもこれいらないだろうと思ったし。
なおりましたﾜｰｲ。
どうも内部の計算的には、sub1の幅＝sub1のwidth + sub1のpaddingとなっていた模様で
どうもここら辺の理解ちゃんとできてないっぽいぞ、と思い、
なぜこの現象が起きたかググってみました。
幅指定の考え方
よく見かけるboxの関係図です。
このboxに対してwidthを指定したとき、初め私はBorderまでを含めてwidthかと考えていたのですが
実際のところboxで指定するwidthとはContentの幅のことを言っているのです。
つまりContentの部分はちゃんと親のsubから見ると50%の幅になってはいますが、
修正前のCSSだとさらにPadding分の幅も加わって結果的にboxが幅50％以上になりでカラム落ちしてしまったわけなのです。
（もちろん指定があればBorder、Margin分も広がるとのこと）
カラム落ちしないようにwidthとpaddingを同時に設定するには
今回は練習用に作っていたのでpadding絶対にいる！ということはないのですが
もしどーしても指定したいという事態が起こったときに対処するにはどうしたらいいか、ついでに見っけたので書いておきます。
①入れ子にして別々に指定
widthとpaddingを同時に指定したらおかしくなるなら
widthとpaddingを別々に指定するように変えればいいじゃないという考え方。
【HTML】
<div id="sub"> <div id="sub1"> <div id="paddingSetting"> <ul> <li>side bar1</li> <li>side bar2</li> </ul> </div> <!-- / #paddingSetting --> </div> <!-- / #sub1 --> <div id="sub2"> <div id="paddinfSetting"> <ul> <li>side bar1</li> <li>side bar2</li> <li>side bar3</li> <li>side bar4</li> </ul> </div> <!-- / #paddingSetting --> </div> <!-- / #sub2 --> </div> <!-- / #sub -->
【CSS】
#sub { color: #fff; width: 830px; background: #F36; padding: 15px; margin-bottom: 10px; } #sub:after { content: ""; clear: both; display: block; } #sub1 { float: left; width: 50%; background: #F36; } #sub2 { float: left; width: 50%; background: #F36; } #paddinfSetting { padding: 10px; }
※sub2のboxの上に変な余白で来たのがちょっと謎…
すんませんまだここは解明できてないです；；
②box-sizingを利用する
要素の幅と高さを計算する為に使用されるboxの既定のルールを変更することができるそうです。もとのルールから変えてしまえホトトギス。
【HTML】
<div id="sub"> <div id="sub1"> <ul> <li>side bar1</li> <li>side bar2</li> </ul> </div> <!-- / #sub1 --> <div id="sub2"> <ul> <li>side bar1</li> <li>side bar2</li> <li>side bar3</li> <li>side bar4</li> </ul> </div> <!-- / #sub2 --> </div> <!-- / #sub -->
【CSS】
#sub { color: #fff; width: 830px; background: #F36; padding: 15px; margin-bottom: 10px; } #sub:after { content: ""; clear: both; display: block; } #sub1 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; background: #F36; padding: 10px; } #sub2 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; background: #F36; padding: 10px; }
※うまいこといったんですけど…
これ、DreamweaverCS6のデザインモードでみるとやっぱりカラム落ちしたままに見えてしまうので
ちょいと「は？」となってしまいますので注意。ブラウザで見るとちゃんとなるのにな…
てなてな感じで。
レスポンシブデザインは今やスマホが主流の現在において避けて通れないこと。
んでそんな中でwidthにパーセンテージ指定って結構ザラなので
今回けつまずいて勉強になったのでよかったです。ふう。
今度はベンダープレフィックスについてちょっと調べてみないとな。
Wix楽しくいじってます
こんばんは。Wix絶賛いじりまくってます。
昨日公開したワークショップサイトをちょこちょこ更新するのがいよいよ楽しくなってきましたウエノミオです。
どんなサービスやツールやアプリケーションにしてもそうですけど
使えば使うほど手になじんでくる、という感覚ってあると思うんですが
私の場合、Wixのホームページエディタは比較的早く手になじんできている感がとてもあります。
SEという仕事柄ということもあり、
なおかつ趣味のイラストでデジタル絵を描く場合は片手ペンタブ片手はショートカットキー連打で作業している性質が講じて
ショートカットキーは覚えるものは覚える、使えるものは使いまくるのが普段のモットーな私。
WixのWebサイト制作は基本クリック＆ドラッグですが、ちゃんとショートカットキーも効くように動いてくれるので、
私にとってはとてもストレスフリーで使えば使うほど慣れてきます。
これもいわゆるWebアプリケーションの一つですけれども
普段仕事では業務用Webアプリケーションを扱っている人間からすると、
こういうBtoC向けのWebアプリケーションって作るときにまた視点が違うんだろうなあと思えてきます。
BtoC向けのサイトにしろアプリにしろサービスにしろ、
触っていると業務用アプリよりもずっとUI/UXについて注意や考えがめぐらされているなと感じます。
アニメーションをよく使うところとか、こちらの違和感を与えない色彩設計とかしているなと思ったりするので、余計に。
ただ一個不満を言うなら、フォントの数字入力の時に
直前で全角入力に変えた状態のまま数字入れようとすると
全く反応してくれなかったときはナンダコレと思いましたが…
しかし感覚的にはエクセルとかワードとか使ってる時と近いので、
おかげでだいぶん突貫工事感は薄れつつあります… ※あくまで当社比
てな感じな状況は置いといて。
ワークショップのお題の一個はレンタルサーバからのサイト閲覧がうまくいけば公開できそう、なのが今日の進捗。
今週末にギャラリーに載せられるような作品（生まれたての蟻かと思うくらいの少なさですが）をまとめてあげたいなと思っていますが
どうも仕事の方が、土曜に出勤命じられそうな勢いひしひし感じて肝がひやひやしている今日この頃です…
ところで。
最近はベッドではなく無駄にリクライニングとかできちゃう机の椅子で寝て起きての生活をしています。
いつぞやかの大学時代にイベントに向けて床で寝ては起きて作業、な修羅場だけどすごく楽しい日々を思い出して
私自身結構そんな生活を楽しんでますが
なんとなく体には変な負荷がかかっていそうでそろそろ恐ろしく感じる年老いた自分がいるのもまた事実。
時の流れには逆らえないものです…
ワークショップサイト、はじめました
どうも、お久しぶりですこのブログ(白目)
一番最初の記事書いてた時からわかっていたけど超絶不定期更新になりましたこの日記。
三日坊主はまさしく私のためにあると自信持って言えます。自慢にならないけど。
さてはて。
ほっぽらかしてた間何やってたんやただ遊んどっただけかいと言われたら
そこは全くもってそうではなくて。
仕事も相変わらずしてたのはもちろんですが
9月、10月、自分の人生というかキャリアを動きながら考えていました。
で考えた結論。
ワークショップサイト作りました。
http://cre30r0ad.wixsite.com/yorozuya-koubou
今現在見た瞬間だと
「は？！？！？！なんもねえ？！？！？！」
「しかもこれ工事中じゃね？！？！？！」という感じに
仕事では絶対やってはならない未完成物を納品するというやらかしをやっているようにみえますね。
(白状しますとWIX今まで全く使ったことなかったから
いざ使ってみて保存しようとしたら間違って公開しました。
人生そういうこともあるあるきっと)
まあしかしながら、残念なことに私現在本業がSEであるために
「これはアジャイル開発の一環だ！」と思うという都合のいい解釈術知ってまして
このURL載せてる今も割と鼻歌うたえる心境です。ふんふふん。
(仕事では絶対やってはいけない解釈術です)
脇道はこれくらいにしといて。
なんでこれ作ったかというと
私やっぱりWEBデザイナーになりたいんだとわかったんです。
だからそのために、自分の勉強部屋、兼、自分の実験部屋、兼、自分の画廊をどこかに欲しかった。
自分の思いをぶつけるために、
自分の熱意に油を注ぎ続けるために、
自分の「好き」「楽しい」「追求したい」を発散するために。
それだけの理由です。
その答えにたどり着いたのが10月。
そこに着くまで色々ありましたけど、
まあ10年20年以上生きてれば当然といえば当然ですが色々ありましたけど。
とりあえず、近頃の私はこんな感じ、というところです。
てなわけで。
今のところこっそりひっそりがっつり転職活動しながら作品作ってます。
SEからWebデザイナーにキャリアチェンジするため動けばその分そこそこ色々課題が出てきますが
なんだかそんな毎日が今厳しくも楽しいです。
てな訳で。
今後勉強のためにつくったものとか
自分の実力を表すための作品とかをこのサイトに置いていこうと思ってますので
このサイト更新したら、連動してこのブログも更新していこうと思います。
どうでもよいけど90年代のJ-POPMV特集どっかでやってくれないかな。
