TORICOインターンブログTORICOインターンブログTORICOインターン生のブログです。会社で起きたことについて情報発信していきます。インターン二、三回ブログを更新できなかった国分です。今日でインターンシップ最終日でした。最後はほとんどスキマコミックスのページのタブ切り替えの機能を作っていました。教えていただきながらやったのでなんとなくはわかるようになったかなと思います!少しずつ学んでいきたいなと思いました!タブの改善を行った後は、9社の漫画アプリを比較してUI/UX上のメリット、デメリットを考えるということしました。この機能はユーザーにとって使いやすいのかどうかということを考えながら比較しました。9つもアプリを比較するのは結構体力が要りますね笑でも、このような作業は好きなのでとても楽しかったし、漫画アプリでも色々な機能があるんだなと感じました。この2ヶ月間、あっという間でしたが、色々なことを学ばせていただきました。バナー制作についても教えていただきました。どのような色や配置が見やすいか、余白はどのぐらいがいいのかなどとても参考になるレビューをたくさんいただくことができ、とても勉強になりました。これから、もっとWebデザイナーとして勉強していきたいと思いました。ありがとうございました。3つのタブを作り、切り替えを行う機能を作っています。前回は、Vue.jsでタブ切り替えができるようにしたところまで進みました!連載中の作品のデータと完結の作品のデータを取ってきて、if文で条件分岐させるのがとても苦戦しました。comics』のページは更新順で並んでいるので完結している作品が読まれないのではないかと思い、連載中の作品と完結している作品をタブで切り替えられるようにするのはどうでしょう?という提案をさせていただきました。その結果、Vue.jsで書いてみようということになりました。インターンこんにちは!今日も引き続きスキマコミックスページのバナーを作成していました!昨日いただいたレビューを基にアメコミ風のバナーの手直しを行い、完成させることができました!!!今回作ったバナーは計3作品。初めに作ったバナーこれは、遊びゴゴロがあるといいかも!というアドバイスをいただき、色々なバナーを参考にしながら作りました!パステルで可愛い感じにしてみました!次に、文字だけのバナーこれは、文字だけでも漫画サイトということがわかるように右下に本のシルエットを入れてみました。最初と同様に黄色とスキマのカラーで作ってみたのですが、これは少し見辛いですね。最後にアメコミ風のバナーコマの間隔の調整や、キャラクターを切り取る作業、文字のバランスなどにとても苦戦しました。個人的に頑張った点は、実際の表紙絵では真ん中の女の子は体が雲に隠れていたため、ペンツールで描き足した点です。comics』用のバナーパターンを増やしています。今日は、アメコミ風のバナーを作っていました。ある程度できた段階でレビューしていただき、文字の間隔やキャラクターの配置など色々アドバイスをいただきました。今まで、枠内にキャラクターを収めようとちまちま移動したり消しゴムで消したりしていたのですが、レイヤーマスクのやり方を教えてもらったことでちゃんと枠内に収まってとても感動しました!笑また、レビューで「きっちり枠内に収めずに外に出してもいいんじゃないかな」と意見をいただき、そんな方法もアリなんだ!と驚きました。他にも、アメコミ風なので背景にパターンをつけるといいのではという意見もいただき、パターンの付け方も教わりました。今回一番苦労したことは、キャラクターの腕や頭が切れていたりしていたので、それをブラシやスタンプツールを使って描いたことです。影の付け方や色の濃さなどに注意しながら描いたので、とても大変でした。インターンこんにちは!今日でインターン11日目でした。今日は、昨日と変わらずバナーを作っていました。昨日作った2つとスキマの「はじめての方へ」のページのヘッドラインを真似したものと、アメコミ風にしてみたものの合計4作品を作りました!!漫画っぽいデザインも作ってみたいなぁと思った時に浮かんできた漫画が『僕のヒーローアカデミア』だったので、アメコミ風のデザインのバナーも作ってみました。漫画のコマ割りを背景に使いたかったので、簡単にIllustratorで枠を作ってその中身をスキマのカラーにしました。「全話無料で読めること」と「毎日更新していること」を一目でわかりやすくするために吹き出しを使い、枠の中にスキマオリジナル作品のキャラクターを配置しました。インターンこんにちは!インターン10日目の国分です。今日は、まず、iPadの表示をPCと同じにするためにメディアクエリの値を今までPCの大きさにしていたのをiPadの大きさに変更しました。それが終わってからバナー作りに取り掛かりました。先週イメージしていたデザインを基に作ってみたのですが、なかなか思っていたようにはならず、自分のセンスのなさに落ち込みました...笑とりあえず、色の相性などを調べたりしていろいろなバナーを真似てみることから始めました。苦戦しながらも「スキマオリジナル作品の表紙絵を取り入れたもの」と「文字だけのもの」の2種類を作り、レビューしていただきました。レビューでは、表紙絵をそのまま切り取って並べていたので、バナーは区切らずキャラクターのみを切り取って配置した方がいいということや色の合わせ方などのアドバイスをいただきました。comics』のページのコーディングがほぼ終わりました!!!XDのデザイン案を忠実に再現することができました!ただ、iPadでの表示がモバイルでの表示と同じになっていて、あらすじが短い場合だと「続きを読むボタン」を押さなくても見えてしまうので、iPadもPCと同じようなレイアウトにしようと思いました。comics』のロゴがあるんですが、その部分をバナーにしようということで、午後からPhotoshopでバナーを作る作業に取り掛かりました。スキマオリジナル作品の表紙絵を入れるデザインや文字だけのデザインなどいくつか考えてみました。インターンこんにちは!国分です。インターン8日目もコーディングの続きをしました。使うと新しいクラス属性を作ることができるということなどを学びました。ボタンを作った後は、XDを見ながら幅やフォントの大きさ、色などを細かく設定していきました。XDはフォントサイズや色などがすぐわかるのでとても使いやすいなと思いました!今回一番苦戦したのは、ボタンの配置でした。画像の下に謎の空白があったり幅が揃っていなかったりで、無料で読むボタンと画像の下を揃えるということがなかなかできませんでした。クラス名を1つずつ確認しながら重なってるところがないか、何か抜けてないかを見ていきました。インターンこんにちは。前回の続きでデザイン案を基にコーディングをしました。今回はBEMの書き方を教わりました。それまでは、クラス名をバラバラに書いてしまっていたため、わかりづらかったり直すときに探すのが大変だったりしていました。教わった直後はうまく書けなかったんですが、意識して書いていると自分で見たときにわかりやすくなっていることに気づきました。SCSSもネストして書きやすくなり、直すときもすぐ見つけられるのでとても便利だなと思いました!また、勉強のためにもBootstrapをやめてflexやmargin、paddingを使いながらコーディングしていきました。flex-basisでカラムと同じようなことができるということも知りました!やっていくうちにPCとモバイルでのレイアウトはデザイン案に近付いたのですが、時間内にJavaScriptを使った『つづきを読む』ボタンを実装することができませんでした。JavaScriptについて大学ではほとんどやっておらず、独学で少しやった程度なのでもう少し勉強しないといけないと思いました。インターンこんにちは。長期インターンシップに参加させていただいている、国分です!インターン6日目は、デザイン案を基にコーディングをしました。comics』の作品一覧のカラム数を3カラムから1カラムにした・左に作品の表紙、右に文章を配置した・ボタンを作品の詳細の下に置いた・ハートと星(レビュー評価)と更新日を横一列に並べた・連載中か完結かわかるように角に色をつけた大きく変わったことはこのくらいで、これらをやりながら幅や大きさなどを変更していきました。インターンこんにちは。長期インターンシップに参加させていただいている、国分です。今日でインターン5日目でした。Analyticsで結果を見てみました。全部無料で読める漫画を一番上に持ってきた結果、トップページの離脱率がモバイルとPC両方減っていました!また、ランキングページでは、ソートを右側にまとめたので検索しやすくなったのかなと思ったのですが、離脱率はほとんど変わっていませんでした。ヒートマップで見たところ押されていなかったのでランキングのソートの配置変更はあまり意味がなかったのかなと思いました。今後はこの結果を基に全て左側に表示されるように変更しようと思います!次に、この間から言っていたSlickの部分にやっと手をつけました。1200px以上だと矢印ボタンが外に表示されるようにしました。することで、矢印が目立ち、押されやすくなったのではないかと思います。4日目に考えたデザイン案にレビューをしていただきました。フォントサイズや間隔、配置などたくさんレビューをいただき、それを基にブラッシュアップをしていきました。デザインを基にコーディングしていくことになるのでしっかり調整して作っていかないといけないんだと思いました。一通り終わったところで、今のスキマオリジナルのページにはない『完結か連載中かわかる機能』のデザインを考えました。見てすぐわかるように、かつ、少し遊びゴコロがあるデザインということを意識しながらデザインを考え、2通りほどデザインをしてまたレビューをしていただきました。実際にコーディングした時に作れるかどうかや色々な場合を想定しながら作らなければならないということを学びました。インターンこんにちは。インターンシップ4日目は、主にXdの使い方について学びながらスキマオリジナルのデザイン案を考えました!今回はPCとモバイル両方のデザインを考えてみました。モバイル版の元々の表示デザインがこちら次にPC版の元々の表示デザインがこちらです。今回デザイン案を考えたものがこちら左3つがモバイル版、一番右がPC版での表示デザインです。左が一番最初に作ったもので、ページの下からスキマオリジナルについての説明を上に持ってきた方がなんのページかわかりやすいかなと思い、ロゴの下に説明を持ってきました。その他はほとんど元のデザインのままです。左から二番目は一番目が終わった後にボタンを下から作品の表紙デザインの横に置いた方がいいんじゃないかと思い置いてみました。他にも、それぞれ作品がわかりやすいように背景を白くし、作品の詳細の欄に『つづきを読む』ボタンを設置し、幅が固定されるようにしました。することで、ファーストビューに必ず1作品は表示され、次の作品のタイトルも見えるのでスクロールすればまだ下にあるということもわかり、見やすくなったのではないかと思います。三番目は、『つづきを読む』ボタンを押した後どのように表示されるかを示したものです。右のPC版の表示デザインは、元々横に3つ並んでいたものを1つずつ縦に並べるような配置にしました。横に3つあると視線の移動が多くなってしまい、ユーザーがストレスを感じるのではないかと思い、このようなデザインを考えました。ファーストビューに必ず1作品と次の作品のタイトルがちらっと見えるようにしたので、視線の移動のストレスも少なくなり、離脱率が低くなるのではないかと予想しています。今回は、ほとんどXdを使ってデザイン案を考えたので、Slickについてはそこまで手をつけることができませんでした。次回は、Slickと今回のデザインを元にコーディングしていきたいと思います。インターンこんにちは。3日目はいろいろあり、ブログ更新できなかったのでこうして4日目の朝に書いています。comics』のレイアウトを少し変更しました。comics』のページは枠がバラバラでページを開くと"無料で読むボタン"がページをスクロールしないと押せなかったりしたので、少し不便だなぁと思い変更しようと思いました。枠がバラバラなのはそれぞれの作品紹介の文章がバラバラだからだということだったので、PCの方の表示を横に3つずつ並んであったものを縦に1つずつ表示させるようにしました。することで、枠のバラつきを改善し、ユーザーの視線の動きも少なくて済むようにしました。ページを見やすさを改善したので、このページの離脱率は減っていくと予想しています。Analyticsの離脱率の数値を見ていきたいと思います。comics』の表示を変えたあと、トップのSlickの部分を変えようと思ったのですが、なかなかうまくいかず、結局この日はできませんでした。Slickについて調べてできれば4日目のうちに終わらせられればと思います。インターンインターン2日目どうも、こんにちは。わからないことだらけの国分です。昨日、燻製会に参加させていただいたのでその時のお話をすこし。みかん😂ここに写っているもの以外にも納豆やチーズ、オリーブなどたくさんありました!私が食べた中で燻製にしても美味しかったものは、ちくわとカニカマとオリーブでした!初日だったのでとても緊張していましたが、声をかけてくださったりしたのでとても楽しめました!!またこのような機会があれば参加したいなぁ・・・😌では、話を戻して、インターンシップ2日目は何をしたかというと昨日途中だった環境設定の続きとProgateを使ってコマンドやGitについての勉強と『スキマ』の改善点をいくつかあげ少しだけ改良をしました。環境設定は相変わらずエラーばかりでしたが、なんとか午前中には終わり、午後からProgateと実際にプログラムを書きました。『スキマ』を少しだけ改良あったらいいなと思う箇所やいらないかなと思う箇所をいくつかあげて、優先順位をつけるという作業をまず行いました。その際に変えた方がいい場合と変えない方がいい場合をユーザー目線で考えました。変えた時どういうことが起きるかなど先のことを考えながら変更するかどうかを考えるということを教えていただきました。実際には、HTMLを少し変えたり、SCSSに初めて触れたりしました。インターン初めまして。今日から2ヶ月間インターンとして働くことになった国分です。私は、今Webデザイナーとエンジニアのどちらにも興味があり、どっちが向いているのかわからず、悩んでいます。どちらにしろ私にはまだ技術がないので2ヶ月間インターンシップを経験して技術を身に付けたいと思い参加させていただくことになりました。学んだことや気づいたことを文章にして残しておければとこうしてインターンブログを書いています。Analyticsについて教えていただきました。自分の『Macの使えなさ』と『コマンドの知らなさ』に直面しました。普段はWindowsを使っているのでMacのショートカットキーがわからず、調べるところから始まりました。環境設定をしようとターミナルを開いたものの、コマンドが全くわからず調べながら進めていきました。進めていた時、Errorの文字が!英語も苦手なので意味を教えてもらいながらなんとかErrorを無くしていきましたが結局その日中には終わりませんでした。Analyticsを見てどういうことがわかるか詳しく教えていただきました。