aoikotori

design

figmaのオートレイアウトの使い方を初心者向けに徹底解説〜基礎編〜

figmaのオートレイアウト機能の使い方を解説している記事です。作り方を画像を用いて徹底的に説明しているので、オートレイアウトの基本が学べます。figmaが初心者の方も概要や使い方を覚えておくと作業効率やエンジニアとのコミュニケーションに役立ちます。
design

現役webデザイナーがfigmaのスタイル機能の使い方を解説

figma初心者だった25歳現役webデザイナーがfigmaのスタイル機能の考え方と使い方を解説します。「スタイルとは」の基本を実際の画面キャプチャを使い丁寧に説明しているので、webデザインを勉強中の方におすすめの記事です。
design

figmaのコンポーネントとインスタンスの概念・使い方を丁寧に解説

figmaのコンポーネントの作り方や、概念を徹底的に解説します。インスタンスの説明や、命名規則などコンポーネントの管理方法も詳細に記載しているので、チームでの作成を目指している方にもおすすめの記事です。
design

Figmaのマスク機能を使って画像を作る方法を徹底解説します。

figmaのマスク機能を使用して画像を作成する方法をご紹介します。基本の使い方を覚えたら、応用することでバナーやアイコン制作の幅が広がるのでこの記事でマスクの使い方をマスターしましょう。マスクのやり方がわからない初心者の方は必見です。
design

現役WEBデザイナーが2年以上インストールしているVSコードのおすすめプラグイン全18選

現役WEBデザイナーが学習を始めた時から2年以上使用しているVSコードのおすすめプラグインをご紹介します。プラグインはVSコード内でインストールできるので、とても簡単に便利な機能をつけることができます。作業効率を上げて綺麗なコーディングをしましょう。
design

5分で完成!フォトショップで足を伸ばす簡単な方法

フォトショップを使用して足を伸ばす簡単な方法をご紹介します。SNSにアップする写真を上手に撮影できなかったときはささっと編集して、素敵な自分を残しましょう。
design

swiperを2つ作り、横スライドと縦スライドをループで逆再生させる方法。

swiperのオプションを駆使して横スライドと縦スライドの自動スライドを作り、逆再生をループさせる方法を説明します。メインビジュアルの仕様にぴったりです。コピペで実装できるので、コーディング勉強中の方も参考にしていただける記事です。
design

CSSのclip-pathで画像やテキストを横から出すアニメーションの実装方法・コードのサンプル

CSSのclip-pathで画像やテキストを横から出すアニメーションの作り方を説明します。コードのサンプルも記載しているので、コピペで実装可能です。SVGアニメーションなしで実装できます。WEBデザイン勉強中の方や、コーディングで困っている方は必見です。
design

6年間愛用したMac Book proを買い替えた時に悩んだこと。

Mac Book proの買い替えをした時に迷ったことや考えたことを説明します。proとairの違いを知りたい方や、webデザイン、コーディング、プログラミングを勉強中の方、これからMac Bookを購入しようとしている方の参考になる記事です。
design

写真の端を違和感なく伸ばす方法〜Photoshop基礎編〜

デザイン初学者向け!画像加工で度々出てくる、作りたい画像サイズと素材が合わない問題を解決します。フォトショップの便利機能を使って上手に塗り足し、画像を伸ばして、作業効率化しましょう。