TORICOインターン生のブログです。会社で起きたことについて情報発信していきます。

右記投稿者による投稿を見る 国分野々香

インターン7日目 #BEMについて学んだ

こんにちは。国分です。


インターン7日目は何をしたかというと、
前回の続きでデザイン案を基にコーディングをしました。



今回はBEMの書き方を教わりました。

それまでは、クラス名をバラバラに書いてしまっていたため、わかりづらかったり直すときに探すのが大変だったりしていました。


教わった直後はうまく書けなかったんですが、意識して書いていると自分で見たときにわかりやすくなっていることに気づきました。

SCSSもネストして書きやすくなり、直すときもすぐ見つけられるのでとても便利だなと思いました!


また、勉強のためにもBootstrapをやめてflexやmargin、paddingを使いながらコーディングしていきました。

flex-basisでカラムと同じようなことができるということも知りました!



やっていくうちにPCとモバイルでのレイアウトはデザイン案に近付いたのですが、時間内にJavaScriptを使った『つづきを読む』ボタンを実装することができませんでした。


JavaScriptについて大学ではほとんどやっておらず、独学で少しやった程度なのでもう少し勉強しないといけないと思いました。


また、明日もこの続きをやって、できれば終わらせたいと思っています!


インターン6日目 #デザインからコーディング

こんにちは。

長期インターンシップに参加させていただいている、国分です!


インターン6日目は、デザイン案を基にコーディングをしました。


とりあえず、今回は、PCの方のコーディングをメインでやっていたのですが、全然終わりませんでした…😭



主にやったこと
・『Sukima comics』の作品一覧のカラム数を3カラムから1カラムにした
・左に作品の表紙、右に文章を配置した
・ボタンを作品の詳細の下に置いた
・ハートと星(レビュー評価)と更新日を横一列に並べた
・連載中か完結かわかるように角に色をつけた

大きく変わったことはこのくらいで、これらをやりながら幅や大きさなどを変更していきました。


やっていてやはりわからないことが多く、調べたり聞いたりしながらでなかなか進まなかったので、今回はあまり書くことがありませんでした…


DjangoやBootstrap、CSS設計思想、オブジェクト指向などまだまだ学ぶことがたくさんありますが、1つずつ確実に知識を身につけていきたいと思います!

インターン5日目 #デザイン案のレビューをしていただいた

こんにちは。
長期インターンシップに参加させていただいている、国分です。

今日でインターン5日目でした。


今日は、まず、先週変更したページについてGoogle Analyticsで結果を見てみました。

全部無料で読める漫画を一番上に持ってきた結果、トップページの離脱率がモバイルとPC両方減っていました!

また、ランキングページでは、ソートを右側にまとめたので検索しやすくなったのかなと思ったのですが、離脱率はほとんど変わっていませんでした。
ヒートマップで見たところ押されていなかったのでランキングのソートの配置変更はあまり意味がなかったのかなと思いました。

今後はこの結果を基に全て左側に表示されるように変更しようと思います!

次に、この間から言っていたSlickの部分にやっと手をつけました。

1200px以上だと矢印ボタンが外に表示されるようにしました。

こうすることで、矢印が目立ち、押されやすくなったのではないかと思います。


そして、4日目に考えたデザイン案にレビューをしていただきました。

フォントサイズや間隔、配置などたくさんレビューをいただき、それを基にブラッシュアップをしていきました。

デザインを基にコーディングしていくことになるのでしっかり調整して作っていかないといけないんだと思いました。

一通り終わったところで、今のスキマオリジナルのページにはない『完結か連載中かわかる機能』のデザインを考えました。

見てすぐわかるように、かつ、少し遊びゴコロがあるデザインということを意識しながらデザインを考え、2通りほどデザインをしてまたレビューをしていただきました。

実際にコーディングした時に作れるかどうかや色々な場合を想定しながら作らなければならないということを学びました。

また、レビューをしていただくことで、自分では思いつかないようなことや気づかなかったところなどを指摘してもらえるので、とても勉強になるなぁと思いました😌

明日以降はこのデザイン案を基にコーディングしていければと思います!


インターン4日目 #Xdでデザイン案を考えてみた

こんにちは。国分です。

インターンシップ4日目は、主にXdの使い方について学びながらスキマオリジナルのデザイン案を考えました!

今回はPCとモバイル両方のデザインを考えてみました。

まず、モバイル版の元々の表示デザインがこちら




次にPC版の元々の表示デザインがこちらです。



そして今回デザイン案を考えたものがこちら



左3つがモバイル版、一番右がPC版での表示デザインです。

左が一番最初に作ったもので、ページの下からスキマオリジナルについての説明を上に持ってきた方がなんのページかわかりやすいかなと思い、ロゴの下に説明を持ってきました。その他はほとんど元のデザインのままです。

左から二番目は一番目が終わった後にボタンを下から作品の表紙デザインの横に置いた方がいいんじゃないかと思い置いてみました。
他にも、それぞれ作品がわかりやすいように背景を白くし、作品の詳細の欄に『つづきを読む』ボタンを設置し、幅が固定されるようにしました。
こうすることで、ファーストビューに必ず1作品は表示され、次の作品のタイトルも見えるのでスクロールすればまだ下にあるということもわかり、見やすくなったのではないかと思います。
三番目は、『つづきを読む』ボタンを押した後どのように表示されるかを示したものです。

そして、一番右のPC版の表示デザインは、元々横に3つ並んでいたものを1つずつ縦に並べるような配置にしました。
横に3つあると視線の移動が多くなってしまい、ユーザーがストレスを感じるのではないかと思い、このようなデザインを考えました。
ファーストビューに必ず1作品と次の作品のタイトルがちらっと見えるようにしたので、視線の移動のストレスも少なくなり、離脱率が低くなるのではないかと予想しています。


今回は、ほとんどXdを使ってデザイン案を考えたので、Slickについてはそこまで手をつけることができませんでした。

次回は、Slickと今回のデザインを元にコーディングしていきたいと思います。


インターン3日目 #初Bootstrap

こんにちは。国分です。

3日目はいろいろあり、ブログ更新できなかったのでこうして4日目の朝に書いています。


インターンシップ3日目は、スキマのオリジナル無料漫画『sukima comics』のレイアウトを少し変更しました。

今までの『sukima comics』のページは枠がバラバラでページを開くと"無料で読むボタン"がページをスクロールしないと押せなかったりしたので、少し不便だなぁと思い変更しようと思いました。

枠がバラバラなのはそれぞれの作品紹介の文章がバラバラだからだということだったので、PCの方の表示を横に3つずつ並んであったものを縦に1つずつ表示させるようにしました。

こうすることで、枠のバラつきを改善し、ユーザーの視線の動きも少なくて済むようにしました。

ページを見やすさを改善したので、このページの離脱率は減っていくと予想しています。
今後は、Google Analyticsの離脱率の数値を見ていきたいと思います。


今回Bootstrapのグリッドシステムを初めて使ってみました!

正直、Bootstrapって名前は聞いたことあったんですが、詳しくはあまり知りませんでした😅


今までCSSでPCとモバイルで表示を変えていたのがHTMLのclassに「col-」をつけるだけで表示切り替えができることに驚きました!
めっちゃ感動!!

これから使っていこうと思いました!



『sukima comics』の表示を変えたあと、トップのSlickの部分を変えようと思ったのですが、なかなかうまくいかず、結局この日はできませんでした。

なので、もっとSlickについて調べてできれば4日目のうちに終わらせられればと思います。

インターン2日目 #実際に少しだけ書いてみた

インターン2日目

どうも、こんにちは。
まだまだわからないことだらけの国分です。

昨日、燻製会に参加させていただいたのでその時のお話をすこし。



まさかのみかん😂
ここに写っているもの以外にも納豆やチーズ、オリーブなどたくさんありました!

私が食べた中で燻製にしても美味しかったものは、ちくわとカニカマとオリーブでした!

初日だったのでとても緊張していましたが、声をかけてくださったりしたのでとても楽しめました!!

またこのような機会があれば参加したいなぁ・・・😌


では、話を戻して、インターンシップ2日目は何をしたかというと
昨日途中だった環境設定の続きとProgateを使ってコマンドやGitについての勉強と『スキマ』の改善点をいくつかあげ少しだけ改良をしました。

環境設定は相変わらずエラーばかりでしたが、なんとか午前中には終わり、午後からProgateと実際にプログラムを書きました。


『スキマ』を少しだけ改良
あったらいいなと思う箇所やいらないかなと思う箇所をいくつかあげて、優先順位をつけるという作業をまず行いました。

その際に変えた方がいい場合と変えない方がいい場合をユーザー目線で考えました。

そして、変えた時どういうことが起きるかなど先のことを考えながら変更するかどうかを考えるということを教えていただきました。

実際には、HTMLを少し変えたり、SCSSに初めて触れたりしました。

SCSSはプログラミングって感じがして私は好きです😁


明日は用事がありお休みをいただいたのですが、空いている時間に少しでもコマンドとかコードとか覚えようと思います!

わからないことだらけのインターン初日

初めまして。

今日から2ヶ月間インターンとして働くことになった国分です。


私は、今Webデザイナーとエンジニアのどちらにも興味があり、
どっちが向いているのかわからず、悩んでいます。

どちらにしろ私にはまだ技術がないので2ヶ月間インターンシップを経験して技術を身に付けたいと思い参加させていただくことになりました。


学んだことや気づいたことを文章にして残しておければとこうしてインターンブログを書いています。



インターン1日目

1日目は、環境設定とGoogle Analyticsについて教えていただきました。

まず、自分の『Macの使えなさ』と『コマンドの知らなさ』に直面しました。

普段はWindowsを使っているのでMacのショートカットキーがわからず、調べるところから始まりました。
そして、環境設定をしようとターミナルを開いたものの、コマンドが全くわからず調べながら進めていきました。

しかし、進めていた時、Errorの文字が!

英語も苦手なので意味を教えてもらいながらなんとかErrorを無くしていきましたが結局その日中には終わりませんでした。


その後、Google Analyticsを見てどういうことがわかるか詳しく教えていただきました。

元々、アクセス解析にも興味があったので教えてもらっている間とてもワクワクしていました!✨


そして、これから『燻製会』なるものに参加させていただくのですが、
またこの話は明日にします!


とりあえず、ショートカットキーとコマンドを覚えるところから始めようと思います!😂