デザイン

プログラミング

Reactで表現するUIモーションデザイン【デュレーション & イージング】

近年UIの表現方法の進化によって、単純にUIのレイアウトや配色・大きさが整っていてわかりやすいだけでなく、モーション(アニメーション・マイクロインタラクション)によるユーザーサポートがUX向上に大きな影響を与えるようになってきました。 Webやアプリは単に「閲覧する」だけでなく「使うための道具」として、より物理的に存在する道具と同等に高度な機能を求められているということだと思います。 その一方でUIモーションはユーザーのUXを著しく害する要因にもなっており、「不用意にモーション(アニメーション)...
Blog

サクッと導入 WordPressでScssを使う方法

Wordpressでもテーマをそのまま使うのではなく、デザインをカスタマイズしているという方も多いのではないでしょうか。 デザインはCSSで編集を行うと思うのですが、CSSは若干使い勝手が悪くコードの記述が長くなってしまうんですよね。...
キャリア・ビジネス戦略

現代における最強の道具、ブラウザアプリケーション5選

「アプリケーションといえばネイティブアプリでしょ」という時代は終わって、今やブラウザアプリでもネットワーク環境さえあればサクサク使えるようになりました。 ブラウザアプリのメリットはブラウザ(ChromeやSafariなど)があればすぐに...
プログラミング

Figma ✕ React Storybook で作るプロトタイピング & スタイルガイド

アプリを開発する前に予め、開発の全体像を把握するためにプロトタイプを作成します。 プロトタイピングツールで作成したUIは、実際のアプリ開発にも流用できるため効率的です。 今回は簡単な写真共有Webブラウザアプリを制作すると仮定して、 プロトタイピングツールFigmaでプロトタイプ作成 Reactコンポーネントへの落とし込み Storybookでの管理 という一連の流れを実際に実装しながらFigmaやStorybookを導入することでどういったメリットがあるのか・どういったことができ...
CSS

Webデザインの基礎 CSS3

CSSとはカスケーディング・スタイル・シートの略。CSSを簡単に説明すると、HTMLで構造付したものに対して、装飾(デザイン)を施していくといった感覚です。サイズや色、フォントなど様々なプロパティが用意されており、それらを組み合わ...
HTML

Webの基礎 HTML5 タグ

HTMLはHyperText Markup Languageの略で、webページを作成する上で、必要不可欠な技術です。HTMLのようなマークアップは、文章の部分がどのような役割を果たしているのか目印をつけることで、コンピュータが文章の構造を...
デザイン

photoshopマジック 人物画像のシワ・シミの修正方法

写真の女性、もとの画像でも十分綺麗な方ですが、雑誌や広告に載せるとなるとイメージが重要になってくるのでさらに加工が必要です。Photoshopなら、しみ・そばかす・シワ、顔の輪郭まで簡単に補正することができます。今回は作業手順と共に...
Illustrator

illustrator オブジェクトの再配色
複数のデザイン案も一瞬で作成

illustratorでデザイン案を作成していて完成してから、やっぱりイメージしていた色と違ったとか、色々なカラーを試してみたいとかいう経験はありませんか? 単純なデザインなら簡単に直すことができますが、入り組んだデザインだと、オブ...
Illustrator

illustrator レイアウトの補正もおまかせ
「個別に変形」機能の底力

チラシなどのレイアウトで均等割付をしていたのに、あとで商品が追加になってしまったことはありませんか。1カセットずつ再度レイアウトを調整してやり直していたら日が暮れてしまいます。そんなとき使えるのが「個別に変形」機能です。現状のレイア...
デザイン

photoshop 自然の影を切り抜く方法

photoshopの切り抜き画像に影をつけたい時、ドロップシャドウではなんとなく嘘くさくなってしまう。もともとの画像に影があるのだからその影を使いたいと思ったことはありませんか? photoshopはそんな願いも簡単に叶えることがで...
タイトルとURLをコピーしました