【Adobe XD】WEBデザインの模写練習【Day12】
こんちは！ひぐです！
非常に日数が空いてしまいました💦
サッカー面白かったっすね！！
今日はもくもく会を行いました！
今の自分には、デザインのインプットが足りない&Adobe XDの理解が乏しい
という課題があると感じていたのでXD を使って、
WEB・スマホページのデザインの模写を行いました！
こんな感じ↓
上から、模写元のページを紹介すると、
この3つです！どれもとてもきれいなWebサイトです。。。！
どんな風に模写したかさっくり説明したいと思います！
⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩
①まず、Adobe XDをダウンロードします
XDについての記事↓
②サイト全ページ保存ツールFireShotを使ってキャプションを取る
Chromeの追加アプリです！
2分くらいで理解&ダウンロードできます！⇩
③キャプションをペースト
XDは画像をクリップボードに保存➡貼り付けが行えます！
（ctrl+C➡ctrl+V)
なので、こんなふうに隣に並べて模写します！
ちなみに、横に並べず
画像を最下層にして、編集画面と重ねるともっと効率いいです！
ですが、余白とか、グリッドとかデザインについて考えず、脳死でトレース
出来てしまうので練習にはならないかも・・・！
-------------------まとめ-----------------
実際模写を行うことで、
Adobe XDの使い方をかなり覚えることが出来ました！
というかXDが高性能&使いやすすぎて、すぐ覚えられる！
また、なんとなく見てたWebサイトも模写してみると、
図の置き方、空白の使い方等いろいろな気付きがありますね！
時間が出来ればXDの操作方法なども簡単に纏められたらいいなと思います！
では～
ポートフォリオサイトのトップページ完成【Day8】
こんばんは、ぐちです！
100DaysOfCode、もう1週間経ったの！？
驚きです（白目）
今日のブログはこれの続きです。↓
今日は、ついにポートフォリオサイトの1ページ目をデプロイできました↓
--------------これ↓------------------
--------------これ↑----------------
作成時間は大体4時間くらいです。。。(笑)
モックアップ1時間半、コーディング2時間半くらいかな
慣れている人なら30分ぐらいで出来そうですが・・・('_')
初めて自分でWebページを作ったので、その所感でも書きたいとおもいます。
作って凄く経験値を得られた気がします！
作成の工程
①まずWebデザインの基礎について学び、構想を練る
こちらは本を読んで学びました。
色使い、フォントはどんなものを使ったらいいか、
そもそもWebデザイナーはどんな風に仕事を進めるのか。全部書いてあります！
超おすすめ本です↓
SBクリエイティブ:いちばんよくわかるWebデザインの基本きちんと入門
②デザインカンプをつくる
詳しくは過去記事へ↓
③htmlをコーディングをする
④CSSをコーディングする
⑤レスポンシブ（スマフォ）対応をする
この辺はProgateなどで勉強しましょう！↑
いきなり作るのが難しかったら、模写とかから初めてもいいかもしれないですね！
模写した記事↓
⑥GitHubにデプロイする
こちらを参考に！↓
作ってよかったなと思うところ
・デザインカンプ➡コーディングの流れを知ることが出来た。
・形に残るので、自分はこれぐらいなら出来るぞ！と自信になる。
・教材と違って、周辺知識を身に着けることが出来る。
作って気づいたところ
・自分がデザインできるものは、自分の記憶にあるものだけ。プログラミングだけでなくデザイン自体の勉強・インプットもしなくてはいけないなと気づいた。
・当たりまえだけど、デザインカンプを模写して作るので、デザインカンプの出来は相当大切。あとから修正はかなり面倒くさい。
・自分の中で得意なデザインパターンを暗記すれば、今後使いまわせる
（例えば、ボタンをhoverした時に色を反転させる。とか）
大変だったところ
・レスポンシブ対応のデザインカンプが無かったので、行き当たりばったりで実装した
コーディングがぐちゃぐちゃになったので修正が大変そう&思わぬデザイン崩れがありそう
次回、気を付けること
・画像サイズが大きすぎて、重い。
・スマホ用のデザインを作ってから実装するべき。
自分は結構ウロウロしちゃったのですが、今Progate一通り終わったって感じてる人はぜひ、こういったチャレンジをしてみてください！！
今後は、残りのページを実装していきたいと思います！
次のページはbootstrap付きで実装、その次はCSS AnimationかReactを足して実装したいと思います！
では～
Adobe XD でモックアップ書いた【Day6】
こんちは、ぐちです！
冷静に休日にブログ書くのは、大体予定入っているし厳しいっすね💦
昨日の進捗を報告したいと思います
昨日はAdobe XDでポートフォリオサイトのモックアップを書きました！↓
Cacooの使用を断念
以前こちらの記事で「Cacoo」というサイトを紹介したのですが、
使ってみると、
・機能が少ない
・要素ごとのピクセル幅がわからない
などの理由から、やっぱり使用を断念しました(>_<)
DLしなくて済むので、用途を選べばパッと使えていいかもしれないです。
Adobe XDが強すぎた
その代わりに昨日から使い始めた、Adobe XDですが、
色々と便利すぎることがわかったので、こちらを紹介させていただきます。
ダウンロードはこちらから↓
what is Adobe XD?
Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。
とのこと。
AdobeシリーズのUX、UIに特化したソフトです！
UI/UX用のソフトで有名なのは
「sketch」等ですが、こちらは、買い切りとはいえ数千円します💦
XDは小容量で使用する場合は無料となっております！
個人でちょっとWebデザイン始めてみたいなーって方にはオススメかなとおもいます。
便利な用法などはいつかまとめたいと思います。。。！
自分が使う上で参考にさせていただいたサイト↓
モックアップの説明
作ってみたのがこちらです！
まあ見ての通り
ショボショボ丸なんですが、一作品目なのでお許しください(笑)
素人ながら気を付けた点は
配色を灰色・水色・濃い水色にして、統一性があるようにした
ことです。
本に紹介されていた、製氷機のサイトのカラーコードを真似したのですが、
現在そちらのサイトはリンク切れでした。。。
左上にロゴを配置したり、フォントとかももっと最適解あると思うんですが、
とりあえず、モックアップ➡コーディングの流れを掴んでみたかったので、
サクッと作成しました。
後にReactで再実装する予定なので、その時にもっとがっつり
デザインしてみたいと思います！
では～
Pythonで国会議員の政党特長を抽出した話【Day５】
こんちは、ひぐです！
毎日ブログ書く時間が遅すぎて投稿タイミングを逃しております（白目）
先日からポートフォリオを作る！と意気込んだのですが、、
大学で研究室に所属しているのにもかかわらず、
研究をおろそかにして、教授にめっためたに怒られてしまったため
本日は研究の進捗を生むためPythonをいじっていました。。。
研究内容は
「国会議事録APIを用いて、民主党政権時代と現在の政権の野党の言葉遣いの比較」
です。
今回はこれについて紹介したいと思います！！
と、言っても？？？
って感じだと思います。
簡単に説明します。
国会の議事録ってネット上にデータとして公開されているんですね。
国会会議録検索システム -国会会議録検索システム検索用API
Pythonを用いてここにアクセスすると、欲しいデータを自動で検索かけて
ごそっとパソコンに保存できるのです！
そしてそのまとまった言語データを統計して、
時代ごとの野党の特徴を見てみよう！というのが今回の趣旨です。
ここからは、ゼミ発表のスライドを使いつつ説明したいと思います！
内容的には、インターン先で書いたブログの続きとなっております。
良かったらこっちも見てください（めちゃくちゃ時間かけて書いたので）
内容
①手法
APIから議員の発言を3年分集めます。そして今回比較したい
「民主党政権時代の野党」と「現在の野党」の発言に分別します。
その後形態素解析を行い、単語を抽出します。
形態素解析というのは、文章を単語単位に分割し、品詞を同定する作業です
↓
今回集めた具体的なデータは↓のようになります
なんで予算委員会なの？という理由は
こんな感じです。
予算委員会は、基本的に野党が与党の追及を行う場所なので、
そういった意味でも言葉遣いの特徴が出るかと思います。(笑)
②結果
結果は、単語を品詞ごとに収集し、
2つのグループに使用頻度の偏りがあるものをピックアップしました。
グラフにするとこんな風になります。
見にくいですが、色の偏りがある単語が特徴と捉えることができます。
②-1 形容詞
旧野党は東日本大震災を彷彿させるようなワードが。
現野党は、与党の発言に対して不信感を持っていることを示唆するワードが出ていますね。
②-2動詞
動詞はあまり特徴が出なかったかなーと思います。
現在の野党に買う、売る、下がるなどお金について示唆している単語が多く出ているのは、モリカケ問題で土地の話が出るからかなと思います。
②-3 末尾表現
末尾表現は、文章で「。」が出てきた部分の前4単語を拾ってきています。
かなり特徴が出ている！と思います。
とくに現野党は言質を取っているように見えないでしょうか？
③プログラミング的なお話
興味ない人にはほんとに興味ない話なんで飛ばしてください
どういう仕組みかというと、
①HTTP通信でAPIに欲しい大臣の発言データを期間指定してGET通信を送る
②XML形式で返ってくるので、タグの要素を検索し、txtファイルに保存する
③保存したtxtファイルをMeCabという形態素解析ツールによって、
品詞ごとに分類する
④sklearnのCountVectorizer()メソッドを用いて、各単語の使用回数をベクトル化してまとめる。
⑤DataFrameに保存しto_csvでエクセルに出力する
⑥適当にエクセルでいじって見やすくする
ってな感じです！
いつかコードをGitHubに乗せます！
反省・考察・今後の流れ
このように、スライドを用意して発表を行ったのですが、
結果はボコボコにされました。
なぜかというと、、、
・データ量を合わせるべく、発言回数に小数をかけたのですが、
有効数字をとっていなかった
・各単語の使用者数を取っていなかった。
グループ全体の特徴か、ある人の口癖かわからなかった。
・末尾表現の定義が微妙。
「ているわけです」と「です」が両方ランキングしているところとか怪しい
などなど。。。。
教授の知の暴力により、あっという間にコテンパンにされてしまいました(*^_^*)
研究は普通のブログとか、「やってみた」程度のノリでやってはいけないのです。
それを深く認識させられました。また、こういう風に一つの事にしっかり打ち込んで学べる事が、研究室・大学院の意義なのかなぁと実感しました。
現在、というか今日そのボコボコにされた内容をすべて修正したので、
これからは機械学習を用いて、更に特長を調べてみたいと思います。
これによって、「もっとも与党らしい与党議員」みたいなのも
数値で出せるようになります(笑)
てな感じで今日はここまで！！
明日は今までの記事を見直してより見やすくしようかなぁと思います。
では～
ポートフォリオを作る！（モックアップ編）【Day4】
こんちは！ひぐです
前回のブログでポートフォリオサイトを作るぞ！
と意気込んだのでありました↓
最近知ったのですが、HTML&CSSでサイトを作るにはいきなりコーディングするのではなく、まずはモックアップや、ワイヤーフレームと呼ばれる下書きを書くことが必要になります。
こんなやつ↓
下書きを書くことで、HTMLの構成等に見通しをたててコーディングできるようになるからですね！
冷静に考えたら、建物でもなんでも設計図はいるわけですから(笑)
そういった、ポートフォリオ作成の流れはこちらのブログから学ばせていただきました
('ω')
一般的にプロのWEBデザイナーの方は、AdobeのillustratorやPhotoshopを使って、
作るらしいですが、、、
- 機能が多すぎて、覚えるのが大変そう
- 有料なので挫折したらつらい
- 早くコーディングしたい
等の理由から、 まずは無料かつ、
学習コストが低そうなオンラインツールでモックアップを作ることにしました。
それがこちら！
このCacooのツールの最高なところは、モックアップを作るためのチュートリアルが
専用であるのです。
これから数日間はこちらの進捗を日記にしたいと思います！
しかし、大学での研究の成果が思う様に出ないので、
ちょっと後回しになるかもしれないです・・・
時間見つけて頑張ろう涙
では～
プログラミング勉強迷走中【Day3】
こんにちは、ひぐです。
プログラミング勉強に迷走してきてしまいました( ;∀;)
Day3で早すぎだろ！と思うでしょうが、
#100DayOfCodeの取り組みをする前から水面下でモチベーションのダウンを感じておりました。。。
インターン、ホントに優しい先輩ばっかり
— ひぐ React勉強中 (@zerebom_3) 2018年6月13日
Aidemyでほんと良かったって思います
やることいっぱいだけど頑張ろう！！！！
↑こんなふうに言っていたのに
なんというか、最近忙しすぎて全然自分のやりたいことの勉強ができなくなって、やりたいこと自体のモチベーションが下がっているの、まさに「消耗」という感じだな
— ひぐ React勉強中 (@zerebom_3) 2018年6月21日
↑すぐこんなんになってしまった
原因としては、
- 院進のための勉強、インターンの業務、Pythonを用いた自然言語処理の勉強、人工知能の勉強、フロントエンド言語の勉強など一度にやろうとしすぎて一つ一つの濃度が薄まり成果が見えづらくなってしまった
- 基礎的な知識を身に着ける場合はProgateなど、教材のレールに沿って行けば体系的に勉強できるものの、いざアウトプットするとなるとエラーなど進まないことが多々ある。そこでモチベが削がれる
- そもそもReact等の難しめの言語からチャレンジしようとしてしまい、挫折
- そもそも飽き性
などの理由があげられます。
でもこの#100DayOfCodeの取り組みを始めたのも、いつまでも基礎的なことをやっていないでアウトプット出さなきゃというのがきっかけなのでうじうじも言ってられないなぁと。。。
ということで、
今日からポートフォリオサイトを作ろうと思います。。。！
勉強のフローチャートとしては
どんなサイトにしたいのか、色使い、レイアウトなどを考えてモックアップを作成
↓
HTML＆CSSでデザインのアウトプットをする
↓
Reactで書き直してみる、なんらかの機能を実装をしてみる
みたいな感じで行こうと思います。
あとはほかのプログラミング以外の日々のやらなきゃいけないことにどう
向き合うかってのも考えないとなぁと思っております。。。
がんばるぞ～
VS-codeの便利な機能7選を紹介！【Day2】
どうも！ひぐです！
#100DayOfCodeの二日目です！
今日はVS-Code（VisualStudio-Code)の便利なショートカットを
ご紹介したいと思います！
VS-codeってのは、マイクロソフト社が作っている、エディタです。
完全無料で、すごーく高機能&軽いわりに知名度が低いやつです。(笑)
どんだけすごいかっていうとこんな感じです↓
今まで何となくエディタAtom使ってたけど、VS-codeに変えたら
— ひぐ React勉強中 (@zerebom_3) 2018年6月8日
・pathが通ってるターミナル付き
・Emmet標準装備
・めっちゃ軽い
・補完が強すぎる
(bacpo→background-positionみたいな）
・カーソル合わせるとメソッドの説明が表示される
・カラーコードが色で表示
などなど強すぎる…！😭
これについて紹介したいと思います！
今日の記事はAtomを現在なんとなーく使っている人に向けて、
Atomとの違いを含めて紹介したいと思います！
ドットインストールやProgateではAtomがおすすめされますが、かなり重いので
良かったらこの機に移行してみてください！
移行も思ったより簡単ですよ！
ダウンロード方法
もうすでにダウンロードしている方はとばしたってください
便利な機能の紹介
1．パスの通ったterminal
他のエディタと同様に左上のファイルから、フォルダまたはファイルを開いて、
コーディングしていきます。
Reactなどを使っていると、npm startなどターミナルでの実行を行いたいときがありますよね。
そういったときは画面したの青い部分をホールドして上に伸ばします。
そうすると下から、カラムが出てくると思います。
ここでターミナルを選択すると、パスの通ったTerminalが表示されます！
ここを上に引っ張ると
ターミナルがでてくる
RailsやReactなど、CUIと同時に使いたい言語のときに便利です！
ぜひ使ってみてください(*'▽')
2．Alt+↑or↓で行入れ替え
選択している行を上下に移動させることが出来ます。
ネストから外に出すときなどに便利！
3.Alt+ctrl+↓or↑で複数行選択
似たような行を変更するときに便利です！
この場合、widthを一斉に変更できますね！
4.(ctrl+d＊ｎ回）で同じ単語を選択
現在選択している部分と同じ単語を検索し、自動でカーソルを合わせてくれます。
ctrlを押したまま、dを押した回数だけ検索&選択してくれます
5．alt+zで右端で折り返し
画面が小さいと、端っこが画面外に出て
スクロールしないと見えなくなってしまいますよね。
そういった時はこの機能を使えばOKです。
左と右を比較すると行番号の振り方が変わっているのがわかるかと思います。
6.F5でデバッグ
F5を押していただけると、コードを走らせることが出来ます。
Pythonなどデータ解析系の言語では重宝します。
Shift+F5で中断できます。
7．ctrl+spaceでサジェスト表示
emmetなど使っていると、Tabで展開した際に間違った補完で展開されてしまう場合があります。
そうした時にはctrl＋spaceでもう一度サジェストから選ぶことが出来ます!
せっかちさんには便利！
こんな感じです！よく使うのはこのへんですね～
もし、もっと便利なショートカットがあれば教えていただきたいです！
進捗報告
今日は昨日に続き、HTMLとCSSの模写、
自然言語処理の研究を進めました。
今日模写したのはprogateの中級編、トップページです
フロントエンドエンジニアになりたい！と僕が思った理由は
- デザイナーってなんかおしゃれ
- 受託業務をうけやすそう（大学生でもバイトにしやすそう）
- 見た目が出来ないとテンション上がらない
みたいな、和紙もびっくりなぺらっぺらな動機なのですが、
最近どこまで出来るようになればいいのか、何を学べばいいのか迷ってしまって作業が進まないことが多々あります。。。
今まで自分がしてきた勉強は未来に向けての勉強（中学受験、大学受験など）で、
何をすればいいか、わかり切っていたので楽ちんだったのですが、
プログラミングの勉強にはゴールも道しるべもないので自分から物を作っていくという
気持ちがないとなかなか進まないなと改めて実感しました。。。
モチベーション維持、勉強方法・意図なんかも勉強自身と同じくらい大切だな。
と思いました
しばらくは引き続き模写を続けて、次第に作りたいものを決める&Reactで実装していきたいと思います…！
ではでは～
