Blog サクッと導入 WordPressでScssを使う方法
Wordpressでもテーマをそのまま使うのではなく、デザインをカスタマイズしているという方も多いのではないでしょうか。
デザインはCSSで編集を行うと思うのですが、CSSは若干使い勝手が悪くコードの記述が長くなってしまうんですよね。...
デザイン
Blog 
キャリア・ビジネス戦略 現代における最強の道具、ブラウザアプリケーション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はそんな願いも簡単に叶えることがで...
デザイン photoshop 最速デザイン ショートカット
illustratorに続き、photoshopのショートカットを紹介します。photoshopはillustratorより感覚的に操作できるため、簡単に習得できるのではないでしょうか。今回も他のサイトであげられているような全てのショー...