なまけもの活動日記

ゲームや音楽、サブカルチャーがすき。

2/13 インターン6回目 WordPressを学ぶ

 ポケモンやってたらインターンの日になりました。剣盾はいいぞ。今なら感想文書けそう。

 

さて、インターンもついにワードプレスまでやってきました。ついにって感じもするけど、もう!?って感じもします。

 

〇初めに(前回の宿題)

 まず、宿題だったところ。メディアクエリのやつです。たぶん、コードはあっているのになぜかうまく反映されなくて、頭を抱えていたのですが、原因はコードの単語と単語の間に半角スペースがないことでした。なんか前もあったぞ…。

 

・コードの間の半角スペース

・{}の閉じ忘れ

・誤字脱字

 

よくこの三点でうまくいっていないことが多いので、これから気を付けていかないといけないなあ、と思います。思ってても見落としがちになる…。

 

CMSとは

 Contents Management Systemのこと。主にphp言語とデータベースの組み合わせで構成されたもののこと。今回習うwordpressCMSの一つです。

f:id:Oomi:20200214220659j:image

f:id:Oomi:20200214220703j:image

 

メリットとしては、すべてのブラウザ上で操作できたり、プログラミング知識が不要だったり、プラグインによって拡張ができるという点があるけど、

デメリットとしては、システムの癖になれる必要があったり(作った人の癖がシステムに出るため)、セキュリティ上の脆弱性がある。確かにパスワードとかめっちゃ頑張れば突破されそう。

 

wordpress

 ・テーマ

有料と無料のものがある。イメージに合ったテーマを探す。

・メディア

画像ファイルは容量に注意。10MB以上はアップできない。大き目でも1~2MBで十分。

PDFのアップ、ユーチューブ動画の埋め込み、動画のアップロードもできる。

・メリット

世界中の人が使っているので、検索で問題解決がしやすい。追加CSSでアレンジ可能。

 

 

実際に使ってみて思ったのは、めっちゃ簡単に、時間をかけずにできる、ということです。htmlとCSSだと、全部細かく打ちこまなくちゃいけなかったのに、書いてあるように入れていけば、すぐデザイン(テーマ)に反映されていく。すごーい!!確かに、プログラミングの知識がなくてもできる!これなら私でもがんばればできそう。

 

今回やってみて、実際にwordpressで作業していくのが楽しみになりました。CSSとかでいじることもあるだろうから、それも忘れないようにしつつ、楽しんで出来ていければいいなあと思います~

あともっとタッチタイピングも頑張ろうね…

 

 

 

1/30 インターン5回目 グリッドを学ぼう

最近omoinotakeというバンドにはまりました。今も聞きながらブログを書いています。サブスクって色々聞けて素晴らしい…。さて、インターンですがテストを挟んでかなりお久しぶりな感じです。今回はCSSの続きです。

 

○グリッド

格子状の線のこと。余白とかが一定になるように使われています。下のは左側がグリッドのおかげで揃っててみやすい。

f:id:Oomi:20200131230310j:image

ウエブサイトとかにも使われてるやつ。福大のホームページとか動画サイトとかでも。

 

それを実装するには以下のコードを組みます。

f:id:Oomi:20200131230318j:image

htmlとCSS両方にちゃんと組めたら反映‼

また、そこで大事になるのが列(column)行(row)です。上記のコード中にも出てきてます。列が↓で行が→。セルがこれで表せます。

 

また、エリアを決めて、色を指定したりできます。そのためにまず、classを指定します。今回はone~sixまでclassを指定しました。

そこからCSSでエリアを指定します。今回はthreeのエリアをスタイル指定します。

f:id:Oomi:20200131230419j:image

 

ここでコード内に出てくる番号はグリッドライン番号です。この番号でエリアのcolumnとrowを指定しています。ここがちょっと自分はごちゃごちゃなりやすく苦手なので、ちゃんとわかるように頑張りたい。

 

*気を付けること

・:や;の付け忘れ

・綴りのミス

 

今回うまく反映されなかったのは大体ここだったので気を付けたいです…めちゃくちゃそれで今回うまくいかなかったので、宿題では気を付けてみようと思います。

 

あとは、gapを使って、セルの間隔を指定したりできます。あるとめっちゃきれいにみえる。

 

○レスポンシブデザイン

これはスマホやパソコンなど違うデバイスで見たときに、ブラウザ・サイズに合わせて表示を適応することです。スマホ・フレンドリーは必須。

Viewportを設定することで、ページをレスポンシブデザインに適応させることができます。

 

○ライブラリ

これは完成コードがあつまっている場所のことです。オープンソースとして有段活用できるし、無料ってすごい。

 

 

今回レスポンシブデザインを学んだりして、どんどん自分が作るホームページが豪華になってくるのが楽しい。もっと応用できるようになりたいです。

 

 

1/9 インターン4回目 CSSってなんだ?

インターンも4回目。今回は新しいCSSを学びます。

 

CSSってなんだ??

CSSってHTMLみたいに1から作るというか独立してる個体の言語かと思ってたら、同時に使うらしい。

CSSのほうで、「HTMLで○○ってコードが出たら☆☆にするんだよ!」って指示を出すみたいなイメージで理解しました。

これをつかうと、HTMLで同じコードを使うと、指示した仕様にすべての箇所がなります。楽!HTMLの方も、何回もごちゃごちゃ書かなくて良くて、見やすくなってよきです。

 

*使い方

f:id:Oomi:20200110200504j:image

まず、headにこのコードをいれます。これでこのCSSをこのページに反映しますよ〜みたいな!

f:id:Oomi:20200110200311j:image

こんな感じにCSSは指示を出します。半角スペースやセミコロンに注意!

f:id:Oomi:20200110200413j:image

実際に書くとこんな感じ。ここに書かれた指示通りに反映されます!

 

*色々できるよ

f:id:Oomi:20200110200736j:image

このセレクタやプロパティを組み合わせると色々できます。すごーい!正直イメージついてないものもあるので、宿題の時に色々してみたいです。

 

*tabキー

コード書く時にいい感じのスペースをあけてくれる。めちゃくちゃみやすくなる。使おう。

 

*レイアウト

f:id:Oomi:20200110201039j:image

マージンなどはSTUDIOのワークショップで習ったぞ…!!ノンデザイナーズ・デザインブックにも載ってたような。この辺まだ使いこなせてない感いっぱいなので、勉強したいです。

 

ちょっとずつだけど色々できてきて楽しい。このまま楽しみながら頑張れたらいいなあ。宿題がんばろう!

 

 

 

 

1/8 ゼミ 二年最後 プロジェクト振り返りなどなど

 一年が早い。もう後期のゼミが終わりました。ちょっと感慨深い気持ち。

 さて、今回は最後のゼミでした。二年の。今回のお品書きは大きく分けて、ミズノさんとのプロジェクト振り返りと、それで得た経験を、LIONさんのホームページに載っているお仕事のどこに生かせるか。という二つです。

 

☆ミズノさんとのプロジェクト振り返り

①ユーザーの体験価値をベースにした企画

f:id:Oomi:20200110202025j:image

やったことを抽象化して、相手に伝える。(就活とおんなじ!) 

体験を、別の場面にあてはめて、なにに生かせるか。

 

今回は3つめの手前くらいまで。うちのチームは+プロトタイピング(四つ目の段階の中の)がちょっとできたかな、という感じです。実際に実験みたいな形でユーザーに使わせてみることができたらユーザーテストもでいていたかも。

「ユーザーの体験価値を探索するフェーズ」深く考えるとはだんだん哲学的になっていく。

「コンセプトアイデア」は日常的に引き出しを増やしていくことが必要。(でないとアイデアが出てこない)むだなことをやるのが大事。

 

哲学的になるのもなんとなく今回実感したし、引き出しの多さが必要だな、とも思ってなるほどなっと思った。(今回オーダーメイドやマッサージというアイデアが私の中では生まれなかったので)

むだなこと(ぽいこと)を日ごろしててダメかなと思ってたけど、いつか生きたらいいな、と思えた。もっと引き出し増やせるように色々やってみよう。

 

②ユーザーモデリング

f:id:Oomi:20200110202036j:image

 

 

誰(属性層)がどんな体験(行為層)をすることでどういう価値(価値層)を得ているかという全体像を可視化=通化 することで、ユーザーに対する深い知識を得られるように

 

③人間中心設計プロセス

f:id:Oomi:20200110202042j:image

 

図はまっすぐ進んでるけど実際は言ったり来たり。

 

④ゴムのユーザー

f:id:Oomi:20200110202047j:image

 

でも自分の主観的な体験からつくるのもアリ。

自分達が想定しないこととはまればビッグヒット

ex:ノンアルコールビール 

運転手(飲めない人)→妊婦さん、お医者さんから飲酒止められてるひと

 

⑤具体と抽象

f:id:Oomi:20200110202054j:image

 

洞察とは、ユーザーの裏にある、口に出していない欲求を見つけること。

 

 

☆得た経験を、LIONさんのホームページに載っているお仕事のどこに生かせるか

f:id:Oomi:20200110202104j:image

⑤の具体と抽象とにているけど、経験を抽象化して、別の場面に当てはめて(今回はお仕事)はなす。これは就活の自己PRといっしょ。これをするには普段からやったことの記録が大事。

 

このような感じで抽象化して、今回は「製品企画・ブランド育成」というお仕事について3人で考えました。(UちゃんとZちゃんと)

その中で上がったのは、

・商品の最初から最後まで、つまりいろんな人に関わる→チームでの活動いろんな人に(インタビューなど)関わった経験

・商品についていろんな価値を考えた経験→消費者によりそえる

 

ということなどです。ホームページには、

「何よりも観客(生活者)をいかにワクワクさせ、満足していただくことで一人でも多くのファンを獲得することが目標です。」

という文がのっており、まとめると、

今回の経験から、この部分を達成するために、社内外のひとと関わりながら、消費者によりそった、良い価値をとどけることが出来る。 

と言えるんじゃないかなあ、と思います。まとめの部分は少し話し合ったことを自分なりにブログに書きながらまたまとめたので、また2人とはちょっとちがうかも。

 

 

☆宿題 営業の仕事になにが生かせるか

私は今回、ヘルス・ホームケア営業に、KA法で分析した経験が活かせるのではないかな、と思いました。

例えば、ある商品について、「この商品を使って良かった!」と思った瞬間についてインタビューを行い、KA法で、価値を分類していくと、今まで考えてた価値ではない価値も発見できるんじゃないかなと思います。それを使うと、今まで勧めていなかった言葉や言い回しで、その商品をお店に置いてもらうために良さを相手に伝えることかできるんじゃないかと。

例えば、この歯ブラシは快適に使えます!だけでなく、この歯ブラシを使うことでテンション上がって使用者に元気を与えます!みたいな(いい例が思いうかばなかった)価値がみつかれば、そんな感じにアピールできるんじゃないかなあ。

 

営業でおもいだしたんですが、オトクニ先生の「広告会社、男子寮のおかずくん」というマンガが営業部の主人公のヒューマンドラマなのですが営業や広告代理店のことも書いてあって面白いのでぜひ。

 

今回、ゼミをやってみて、難しいことは沢山あったけど、引き出しを足りないなあ、ということをひしひし感じたので引き出しを増やしたいです。やっぱり、今年はいろんなところでこのことに苦しんだので日々発見して書き留めていきたい。抽象化もできるように!!

 

 

 

 

 

 

12/26 インターン HTMLを楽しもう②

冬休みです。うれしい。積み本と積みゲーをやるぞと意気込んでます。

 

 さて、今回は年内最後のインターンです。HTMLも最後みたいです。

 

*タイピングについて

タイピングですが、前回よりスコアか下がってしまっていました。多分ですが、私は中指と薬指のあたりを正しく使ってタイピング出来てない気がします。そのあたりの文字でよくミスる。冬休みはこれも課題ですね。

 

*画像ファイル

jpg→写真とか。透過なし。圧縮で画像が劣化

png→背景透過あり。

gif→コマ動画にできる

 

この3つを覚えとかなきゃいけないです。jpgとpngはよく使うので、どっちの方が今あっているかなとかわかるようにならないとですね。

 

黄金比白銀比

黄金比という言葉は知っていても比率はちゃんと覚えられてなかったり、白銀比という言葉はそもそも知らなかったり。今後、なにかをデザインする機会があれば応用していきたいです。キティちゃんにも応用されていて、身近なものにも沢山使われているんだなあ、と実感しました。

 

*HTMLを楽しむ

今回は画像を動かしたり、マウスカーソルを合わせると表示される画像が変わったりするものを組みました。

<marquee>→動く

 

f:id:Oomi:20191227131703j:image

画像が変わったりするやつはながいのでスライドで。onmauseとかはUnityちょっと基礎の基礎齧ったときも見たことがあって、なるほどー!?って思いました。他のこともできそう。

 

どちらもサイトなどで使われていて、こんな風になってるんだー!と思いました。画像が変化する方は、入力ミスなどで時間がかかったので、これからサイトを作るときはそこに気をつけたいです。

 

リストは、2種類あって、

<ol>…数

<ul>…点々

の二つです。間に両方とも、<li>と打つことでリストができていきます。

 

この二つの違いは、先頭が数字か・かという違いです。改行しながらリストを作らなくていいのはめちゃくちゃいいですね。

 

また、表はこんな感じ。

<table  border=1>→後ろの1は枠線の太さ

 td→表のたて

 tr→表のよこ

 th→表の見出し部分

 

これらを組み合わせて作ります。やってみたらなんとなくわかるけど、文字だとちょっとわかりにくい。

 

コメントアウトの機能もあるみたいです。書いとくと、後で仕様変更するときとか良さそう。

YouTubeの埋め込みも、共有から簡単に出来ます。すごい。

 

*HTMLの構造

HTMLの構造としては、この形になっています。

f:id:Oomi:20191227132228j:image

 

また、ブロック要素とインライン要素にわけれます。ブロック要素の中にインライン要素が入るイメージ。入れ子構造です。

 

 

今回でHTMLの解説は終了。大まかなところは習ったので、ウェブサイトとかを参考にしながら、冬休みの間にページをつくりたいとおもいます。ちょっとずつコードの意味がわかってきて楽しい。頑張ろう。

 

 

12/18 ゼミ発表の振り返り

 ゼミ発表会がありました。めちゃくちゃ緊張して、なんとか終われてほっとしてます。今回はその振り返りとかです。

 

☆発表について

今回、前半の方の発表をさせて頂きました。正直、今回のプレゼン内容を私はグループのみんなより理解しきれてなかったり、他のみんなの方が深く考えていると思っていて、自分になると思いませんでした。ルーレットで決めたら当たってしまって割とあがり症なのでめちゃくちゃ緊張しながら発表をしました。

プレゼンの原稿などは前日の夜、夜中もグループの子たちがアドバイスを送ってくれたりして、また、発表中も、表を指差してくれたりとめちゃくちゃサポートしてくれました。ウレシイ…!パワポも最高に素敵。自分から率先してやってくれて、感謝しかないです。

 

プレゼンに関しては、昔から苦手意識があるのですが、今回させていただいて、

①ゆっくり話すこと(あがらないこと)

②もっと前を見て話すこと

③アドリブ(トラブルがあった時の対応)上手く

この三点をもっと詰めて、できるようになって行かなくてはいけないな、と思いました。人前に立つ度胸がまだまだ足りないので、これから場数を踏まないといけません。また、めちゃくちゃ緊張して噛むので滑舌とか、間とかとれるようにならないとです。テンパらないように。プレゼンを上手く出来る、というスキルはやっぱ必要だと思いました。

 

☆プレゼン内容について

私たちのチームは「マッサージ機能が付いた木ペン」です。マッサージ機能を思い付いたチームの子は天才だと思います。

f:id:Oomi:20191221220110p:image

偶然の出会いを作るキッカケになるものですが、そこには不安を解消する価値だったり、変わったものを持っている人に話しかけるとか、手遊びをしちゃうとか。ペルソナ自身の疲れている状態だとか、インタビューなどで出た内容がぎゅぎゅっと詰められたものだと思います。試作品も、チームの子が作ってくれて、すごいイメージがつきやすく、プレゼンもやりやすかったです。

 

 プレゼンの内容として、めちゃくちゃ大変だったのは、「偶然の出会い」というワードがわけわからんぐらい難しかったということです。私たちは、愛着そのものが何か?ということよりも、こちらのワードがよくわからなかったように思います。例えばですが、今回パワポに落とし込む時、また、プレゼン原稿に落とし込む時、商品そのものなどについてではなく、偶然の出会いの時間軸や、この表現はこのままでいいのか?と、一度納得したことであっても様々な疑問点が出てきます。また、何度もいろんな図を書いたりしながら、前後しながら話し合いをしてきたため、一本道のプレゼンにするのはどこで、どの部分を流れにして話せばいいのかが非常に難しかったです。

f:id:Oomi:20191220225904p:image

例えば、コミュニケーションを取るのはこの福大同士でなくてもいいということ。対象としてるペルソナはAさんなわけで、Aさんがコミュニケーションを通じて、繋がり(愛着)を感じてくれたらこの、私たちがかんがえている「繋がりの軸をつくる」ということは達成されるということ、AさんがBさんと話すと、それを通して、みんな(福大時代の友人や思い出)を感じられること。

これらは、プレゼンのどの部分に差し込むのかとか、私自身では、Bさんを通してみんなを感じることなどに気づかず、チームの子がそうかもしれない、と言っていてそこでやっと気づく

ことが出来ました。

f:id:Oomi:20191221154006p:image

あとは、ここの時間軸にも悩まさせられました。欲求がでてくるなら、その前にAさんが気づいてないだけで、潜在欲求があるとか。個人的に一番難しかったのが、商品がいろんな場所(全ての部分)に関係してくるというところです。

f:id:Oomi:20191221215809p:image

この図だと、商品が色々なところにあります。私は最初の、一か所にしか商品がないと思っていたので、他の部分にも商品がかかってくると思う、と聞いて目から鱗でした。確かに、商品がきっかけにだけなって消えるわけでなく、その後もその商品は継続して色々な形で関係してきます。ならば、そこ一か所だけに商品(星印)があるというのは不自然です。たぶん、一番大きな場所としては、最初からあるきっかけの部分だけど、そこだけではないんですよね。

 また、とあるチームの子が発表前日にラインで話しているときにいった、「自分の考えがあっているのか、誰もいまだにわかっていないよね(笑)」ということがストンと落ちたというか頭に残ってます。割となんというか今回考えてたところが哲学的…?(いい表現がわからない)みたいなことで私たちがこうかも?これかも?と悩んでたことは明確な正解がないので、まちがってはないはずだけど、あってるかもわからないからこそ、ずっともやもやしてたみたいな。その子がまたよく色々考えて悩みながらアドバイスをくれていてからこそ、私の中にストンと来たのかなあとも。(このラインの発言載せていいかきいてないんですが、個人的にめちゃくちゃ印象に残って大事にしたいと思ったので載せてます、読んでたら勝手に載せてごめんね!!)

 

☆他の班の発表とかを聞いて

 めっちゃすごい…。自分になかった着眼点が出てきます。太宰ゼミの方は、データをきちんと量をとって分析しているため、数字でだしてくること、ちゃんとした証拠として出てくるのですごく納得できるし、説得力があるなと思いました。デザイン案募集をかけるとか、コラボグッズにするとか、人の巻き込み方・どうやったら買ってもらえるようになるかという部分のアイデアが私にはないもので、「そんな方法もあったんだ!」と勉強になりました。同じお題でも、アプローチの仕方で、こんなにも考え方が変わるんだなあとも。

 森田ゼミの方も、そんな価値があるんだ、とか数年後のペルソナっていう風に2つ作るのもありだったな…!!と驚くことばかりです。オーダーメイド要素が両チームとも入っていて、確かに愛着がすごくわきやすい要素で、これすごくいいなあ、と思います。木ペンにもいれたい。これがあればどう買ってもらうかみたいな問題点が解消しやすいと思うんですよね。また、私たちのチームを含め、思い出みたいなワードが上がってくるの面白いなあ、と思いました。愛着とイコールに近いモノなのかな。

 

☆まとめ

 めちゃくちゃ反省点とか、もっと積極的に色々出来たらよかった!という反省ばかりですが、今回一番学んだのは、「色々な人と考えてみること」です。今回、ゼミをしていく中で、私は他のチームの子たちのように、「ここがちょっとこうかも?」みたいな疑問点をもてない、持つことが苦手だなと思いました。一回そのことが決まったりするとなんか自分の中でかみ砕いて納得しちゃっててそこに気づけないみたいな。それもその納得みたいなところが聡明だからとかちゃんとしてるわけじゃないから、良くないなあ、と思いました。多角的にみることが苦手?思い込みが激しい?よくわからないけど、物事を深く考えれないみたいな。ひっかかりをちゃんと捉えられるようになりたいし、できないからこそ、ちゃんとそこに気づける人と色々考えていくことが私にとっては重要だと思いました。

 また、グループのメンバーがみんなで集まったり、疑問点を教えてくれたり話し合えたり、たくさん迷惑もかけってしまったけれど、協力して考えることができる環境で(こんなに意見を言い合える環境ってあまりないと思った)、グループでやるのって大変なこともあるけれど、めちゃくちゃいいことだし、勉強になるし、楽しかったなあ、と思います。感謝しかない。もしも、次があるなら、もっと自分のスキルを磨いて、今回得たことを生かせるような人間になりたい。がんばろう。

 

 

12/12 インターン2回目 HTMLを楽しもう

インターン2回目でした。今回は前回のHTMLの続きと、タッチタイピングのテストがありました。

 まず、タッチタイピングのテスト。やってみて思いましたが、中指と薬指のキーが苦手っぽい。ミスる。また、スピードが私はあまり早くないので、鍛えていきたいなと思います。みんな早い。

 

HTML

 今回は、まず、文字の大きさや色を変えてみました。これら二つは一緒に表記できる。一緒に表記した方がわかりやすいな〜って思いました。これをしているとき、「HTMLって色は複雑なやつは使えないんだろうか? 」って思ってたら(=Green という表記だったため)カラーコードで示せるみたいです。あとは画像入れたり、その大きさ変えたり。リンクも貼れるようになり、ちょっとしたページなら出来そうです。

 

色について

HTMLの色はカラーコードで表せるみたいです。原色大辞典みて、たくさん色使えるやん!!って思いました。カラーコードは16進数。基礎的な色だけでも覚えていきたいなと思います。また、RGBやCMYKもでてきました。なんかこの辺つい一か月前くらいに勉強したのに忘れてて、また見直さないとな~と思います。

 

単位について

emって単位初めて知りました。pxしか見たことがなかったです。ポイントとかインチとかもよく使うけれど、理解しきれていないまま使ってたんだなあ、と思いました。

 

こうやって、一時間ぐらいしかインターンを受けなくても、沢山課題が出てきて、ひとつずつでもできるようにならないと、と思えるので良かったなあ、と思います。ページの方はちょっといじれたので(何を書いたらいいかわからず、狂人のように猫がかわいいと言っているページができてしまった)うれしかったです。ちょっと調べたりして、もっと工夫できたらいいなあ。