Hikari - Githubissues

tyuraka commented 3 years ago

introduction

[x] 課題を始める

what is design

[x] いいデザインって何だろう？

Figma

color scheme

[x] 配色について考える

Web page

trace

final

ここでやること

終わったら該当の課題にチェックを入れる
その課題の中で理解するのに苦労したことや参考になった記事などを貼り、何を学んだのか積極的に発信する
課題を進めていく中で発見したこと、勉強会や定例会などで吸収したことを積極的に記入する
自分の知識を蓄積するノートとして活用する

tyuraka commented 3 years ago

what is design UI はユーザーインターフェースフォントやデザインがそれ

UXはユーザーエクスペリエンス商品やサービスに触れて、ユーザーが感じること（美しいとか）

can't unsee 全体的な見た目の良さだけでなく、図形や文字を揃える・中央揃えにする・図形や文字がわかりやすくなるように背景の色を考えるなどのことがわかった。また、Hardは難しく、慣れるまで時間を用した。特に、文字と文字の間隔を比べるのが大変だった。can't unseeを通して、どのようなデザインが良いのか理解することができた。

tyuraka commented 3 years ago

2021-10-02

tyuraka commented 3 years ago

Figmaを使ってみるチームに招待されてからは、すらすらと課題をこなせた。特に困ったことはない。

tyuraka commented 3 years ago

基礎操作１なぜか、コメントが勝手に消える現象が起こったが、トップに戻ったらちゃんと更新されていた。 CRUDとは、create・read・update・deleteのこと？ 2021-10-04

tyuraka commented 3 years ago

基本操作２オブジェクトに対してフレームをフィットさせる →Frameの右上の矢印の集合体フレーム外のオブジェクトを表示する →Frameの左下にあるclip to content

tyuraka commented 3 years ago

基本操作３特になし

tyuraka commented 3 years ago

基本操作４フレーム化は複数のオブジェクトをまとめるのに便利グループ化はただ単にグルーピング

フレーム＞グループ

tyuraka commented 3 years ago

確認問題１文字などを前面に出す時は、Bring to frontを右クリックで出す必要はない。左サイドバーで、文字をフレーム内又はグループ内の上の方に上げればおｋ。

tyuraka commented 3 years ago

ツールバーの操作１ツールバーの機能について、学ぶことができた。コンポーネントとマスクがよくわからなかった。コンポーネント→https://note.com/fjkn/n/ne50d8b5f59d3 マスク→https://www.youtube.com/watch?v=1caTQahRFCk

tyuraka commented 3 years ago

ツールバーの操作２オブジェクトとキャンバスの操作について、学ぶことができた。たくさんのことが書いてあったので、覚えられるか心配だ。

たくさん項目があるので、Design Course Tutorialのツールバーの操作２の復習をよくするように

tyuraka commented 3 years ago

ツールバーの操作３ファイルを移動するツールバーのファイル名の左にあるDraftをクリックする

ファイルのバージョン履歴の確認プルダウンメニューのShow Version Historyをクリックする

ファイルの書き出し右サイドバーのExportをクリックする 2021-10-06 (1)

tyuraka commented 3 years ago

ツールバーの操作４コンポーネントについては今まで、よく知らなかったので、学べてよかった。

Design Course Tutorialのツールバーの操作４の復習をよくするように

tyuraka commented 3 years ago

ツールバーの操作５オブジェクト結合について、Flattenで完全な図形にすることができるらしい今まで、Flattenが謎だったので、学べてよかった。

tyuraka commented 3 years ago

ツールバーの操作６マスクについて、マスクをすると切り抜きたい画像が消える現象が起きた。以下のやり方でできた。元となる図形→切り抜きたい画像→ctrlで複数選択→マスク https://www.youtube.com/watch?v=1caTQahRFCk

tyuraka commented 3 years ago

確認問題２ windowsなので、余白を測るのに苦戦した。以下のやり方でできた。測りたい図形を選択→Alt→測りたい部分にカーソル

枠線に囲まれた図形を作りたい時は、strokeを使えばよい

tyuraka commented 3 years ago

プロパティパネルの操作１そうなに難しくなかった。新しく学んだことは正方形にしたい時は、右側のクリップをクリックすれば、自動的になることと、図形のそれぞれ角の角度を変えたい時は、右のアイコンをクリックすることだ。

tyuraka commented 3 years ago

プロパティパネルの操作２今回は結構わかりづらかった。オブジェクトの整列はこのURLを参考にする。 https://www.youtube.com/watch?v=qQyaPqem0TA Tidy upをする時はctrlで図形を選ぶことが先。３種類の整列の違いはこのURLを参考にする。 https://www.youtube.com/watch?v=DaQRrTjyDhQ パスを整列する時は、パスを作った後に、ダブルクリックし、点が見えるようにする。

tyuraka commented 3 years ago

プロパティパネルの操作３以前よく使っていた機能なので、そんなに難しくなかった。グラデーションの付け方は以下を参考にする。 2021-10-12

tyuraka commented 3 years ago

プロパティパネルの操作４ 2.線の位置を変える　が最初はよくわからなかった。以下のURLを参考にした。 https://stand-4u.com/web/tool/figma.html 2021-10-12 (1)

tyuraka commented 3 years ago

プロパティパネルの操作５今回はそんなに難しくなかった。ペンやシェイプで作った図形を編集する時は、ツールバーの一番左のアイコンをクリックしてもできる。

tyuraka commented 3 years ago

プロパティパネルの操作６ Background blur がよくわからなかった。以下のURLを参考にする https://www.youtube.com/watch?v=e1BRH09iwes

Background blurにする時は、Layerの％の部分をいじらない。

tyuraka commented 3 years ago

プロパティパネルの操作７今回はTEXTの各機能について学んだ。それぞれ覚えておきたい。段落間隔・resize・テキストの縦位置を加えるのは避ける。

tyuraka commented 3 years ago

プロパティパネルの操作８特になし。

tyuraka commented 3 years ago

プロパティパネルの操作９ contraintはなぞの一つだったので、どういう機能があるか知れてよかった。詳しい説明については、以下のURLを参考にした。 https://note.com/wecken/n/nd8e6e8017a83#mf84x

tyuraka commented 3 years ago

プロパティパネルの操作10 高度なAuto Layoutがまったくよくわからなかった。今度聞く。

tyuraka commented 3 years ago

プロパティパネルの操作10 Auto layout がようやくわかった。 Auto layoutをする時は、文字から先に書いて、グループ化する。以下のURLを参考にする。 https://www.youtube.com/watch?v=TyaGpGDFczw

高度なAuto layout ロックで特定の場所に固定しないのは、それがどこのいちにあるか(padding)が見えなくなってしまうから。

tyuraka commented 3 years ago

プロパティパネルの操作11 少し難しかった。propertyを作る時は、propertyにする前にコンポーネント名/プロパティ1/プロパティ2/... みたいに名前を付けてからvariantsにする。以下のURLを参考にする。 https://note.com/ku_marin/n/n4f4aceabe533

tyuraka commented 3 years ago

確認問題３

縦横の比率を変えないで、大きくするには横のクリップのアイコンをクリックする。
alignment の機能でできる。
Text → 三点リーダー → Letter caseから変更できる。

tyuraka commented 2 years ago

プロトタイピング理解するまでに時間があった。知らない用語がたくさんあった。基本の操作はこのURLを参考にする。 https://www.youtube.com/watch?v=-sAAa-CCOcg&t=86s triggerとactionはこれを参考にする。 https://note.com/seyanote/n/n904513c25c85 animationはこれを参考にする。 https://www.youtube.com/watch?v=-d6zNGeF59M easingはこれを参考にする。 https://www.youtube.com/watch?v=cAkOH9uaXHA

tyuraka commented 2 years ago

ドロップダウンメニュー img_css3_dropdownmenu

tyuraka commented 2 years ago

モーダルウィンドウ eyecatch

tyuraka commented 2 years ago

確認問題４やっと終わった。そんなに難しくなかった。

tyuraka commented 2 years ago

画面遷移図の制作ドロップダウンメニューを遷移先として、まとめたり、特定のページにある別のページをまとめたりするのに用いることがわかった。

tyuraka commented 2 years ago

Atomic design コンポーネントの命名規則・階層名(atoms,moleculesなど)/パーツ名/(状態)　ex atoms/button/default ・user list など、２単語以上ある場合は-で単語を繋げるのがルールです。ケバブケースで調べてみましょう・ケバブケースは UI を実装するフロントエンドでよく使うためです・小文字のみ使用

ケバブケースとは？このURLを参考にする。 https://wa3.i-3-i.info/word16380.html

tyuraka commented 2 years ago

テキスト・カラーなどの登録テキストの命名基本、shionome text styleを使う。カラーの命名・色名は基本色名_詳細色名で表す・基本色名は Color Wheel の 6 色（red, orange, yellow, green, blue, violet）と白黒灰 3 色(white, black, gray) を合わせた 9 色　を使う・詳細色名は HTML CSS Color Pickerで検索してヒットした色名を使う・色の並べ方はwhite->gray->blue->green->yellow->orange->red->violet->black ・透明度が 100%でない場合は基本色名_詳細色名_透明度のようにする例はDesign Basicを参考にする