いるそら@Webデザイナー

いるそら@Webデザイナー

記事一覧

デザインカンプからコーディングに挑戦してみよう!(画像付き)(クールデザイン)

こんにちは!Webデザイナーのいるそらです。 今回は「デザインカンプからコーディングに挑戦してみよう!」のクールデザインを画像付きで公開します。 ↓↓画像なし記事は…

300〜
割引あり

デザインカンプからコーディングに挑戦してみよう!(画像付き)

こんにちは!Webデザイナーのいるそらです。 以前投稿した「デザインカンプからコーディングに挑戦してみよう」という以下の記事で、配布されているデザインカンプ内の画像…

300〜
割引あり

【Webデザイン練習用】ワイヤーフレームとデザインコンセプトを配布します!(第2弾)

こんにちは!Webデザイナーのいるそらです! 「Webデザイナーになるためにデザイン制作の練習がしたいけれど制作経験が少なく、アイディアが浮かばない…」という悩みを持…

0〜
割引あり

FigmaとAdobe XDどちらが良い?【初心者向け】私がFigmaを推す理由

こんにちは!Webデザイナーのいるそらです! Figmaも Adobe XDも、プロトタイプ機能を備えたWebデザインを行いやすいツールですが、「どちらのツールを使ったらいいの?」…

Figmaでサクッと画像補正!知っておきたい補正機能の使い方

こんにちは!Webデザイナーのいるそらです! Figmaで画像を貼り付けた際に、「ちょっとだけ」明るくしたい、コントラストをつけたい、と思ったことはありませんか? 画像加…

Webデザイナー愛用!作業効率をアップするツール2選&Chrome拡張機能5選

こんにちは!Webデザイナーのいるそらです! コーディングをしてる時、htmlファイルのソースチェックやデザインと照らし合わせながらの確認って大変ですよね。チェックの時…

アイディアが浮かばないあなたへ!ワイヤーフレームとデザインコンセプトを配布します

こんにちは!Webデザイナーのいるそらです! 「Webデザイナーになるためにデザイン制作の練習がしたいけれど制作経験が少なく、アイディアが浮かばない…」という悩みを持…

0〜
割引あり

覚えると便利!よく使うFigmaショートカット(総集編)

こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、これまでに紹介してきた…

デザインカンプからコーディング練習! 流行りのレイアウトに挑戦してみよう(クールデザイン)

こんにちは!Webデザイナーのいるそらです。 今回も勉強の一環で作成したWebデザインカンプを配布することにしました! 作成したのは最近流行りの背景は固定されたまま真…

200〜
割引あり

覚えると便利!よく使うFigmaショートカット(ズーム編)

こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigm…

覚えると便利!よく使うFigmaショートカット(オートレイアウト編)

こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigm…

覚えると便利!よく使うFigmaショートカット(配置編)

こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigm…

デザインカンプからコーディング練習! 流行りのレイアウトに挑戦してみよう(ボタニカルデザイン)

こんにちは!Webデザイナーのいるそらです。 今回も勉強の一環で作成したWebデザインカンプを配布することにしました! 作成したのは最近流行りの背景は固定されたまま真…

200〜
割引あり

覚えると便利!よく使うFigmaショートカット(コンポーネント編)

こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigm…

視覚で伝える力!インフォグラフィックの魅力と活用法

こんにちは!Webデザイナーのいるそらです! 今回は情報を視覚的に伝える手段の一つである「インフォグラフィック」についてメリットや事例など解説していきたいと思います…

覚えると便利!よく使うFigmaショートカット(編集編)

こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigm…

デザインカンプからコーディングに挑戦してみよう!(画像付き)(クールデザイン)

デザインカンプからコーディングに挑戦してみよう!(画像付き)(クールデザイン)

こんにちは!Webデザイナーのいるそらです。
今回は「デザインカンプからコーディングに挑戦してみよう!」のクールデザインを画像付きで公開します。
↓↓画像なし記事はこちら↓↓

本記事用に販売できる画像を用意して、画像付きの内容として改めてご紹介させていただきます。

作成したのは最近流行りの背景は固定されたまま中央のスマホ幅コンテンツだけスクロールされる「モバイルファーストなサイト」です。架空の

もっとみる
デザインカンプからコーディングに挑戦してみよう!(画像付き)

デザインカンプからコーディングに挑戦してみよう!(画像付き)

こんにちは!Webデザイナーのいるそらです。
以前投稿した「デザインカンプからコーディングに挑戦してみよう」という以下の記事で、配布されているデザインカンプ内の画像もほしいというご要望をいただきました。

その時は販売できる画像ではなかったため、今回は雰囲気の似た別の画像を用意して、画像付きの内容として改めてご紹介させていただきます。

作成したのは最近流行りの背景は固定されたまま、中央のスマホ幅

もっとみる
【Webデザイン練習用】ワイヤーフレームとデザインコンセプトを配布します!(第2弾)

【Webデザイン練習用】ワイヤーフレームとデザインコンセプトを配布します!(第2弾)

こんにちは!Webデザイナーのいるそらです!
「Webデザイナーになるためにデザイン制作の練習がしたいけれど制作経験が少なく、アイディアが浮かばない…」という悩みを持つ方は多いのではないでしょうか?
そんな方のために今回はWebデザイン制作の練習に役立つ「モバイルファーストなデザインのシャンプーのLPサイト」を想定したワイヤーフレームとデザインコンセプトを配布します!

✨こんな方におすすめ今回配

もっとみる
FigmaとAdobe XDどちらが良い?【初心者向け】私がFigmaを推す理由

FigmaとAdobe XDどちらが良い?【初心者向け】私がFigmaを推す理由

こんにちは!Webデザイナーのいるそらです!
Figmaも Adobe XDも、プロトタイプ機能を備えたWebデザインを行いやすいツールですが、「どちらのツールを使ったらいいの?」とお悩みの方もいらっしゃるかと思います。

これまでの記事でもFigmaに寄ったお話をさせていただいていますが、これからWebデザインを始められるなら、私はFigmaがおすすめです!

なぜFigmaがおすすめなのか、同

もっとみる
Figmaでサクッと画像補正!知っておきたい補正機能の使い方

Figmaでサクッと画像補正!知っておきたい補正機能の使い方

こんにちは!Webデザイナーのいるそらです!
Figmaで画像を貼り付けた際に、「ちょっとだけ」明るくしたい、コントラストをつけたい、と思ったことはありませんか?
画像加工ソフトを使用するほどではないけど、ちょっとした画像の加工をしたいと思う場面は意外とあるのではないでしょうか。
今回はそんな時に便利なFigmaの補正機能について紹介していきたいと思います!

では、実際の画像を元に調整してみまし

もっとみる
Webデザイナー愛用!作業効率をアップするツール2選&Chrome拡張機能5選

Webデザイナー愛用!作業効率をアップするツール2選&Chrome拡張機能5選

こんにちは!Webデザイナーのいるそらです!
コーディングをしてる時、htmlファイルのソースチェックやデザインと照らし合わせながらの確認って大変ですよね。チェックの時間が足りない!という方も少なくないのではないでしょうか?
今回はそんな方におすすめの見落としを減らしたり、チェックを楽にするツールとChrome拡張機能をご紹介したいと思います。

🔧ツール①CompareMerge2(Mac版

もっとみる
アイディアが浮かばないあなたへ!ワイヤーフレームとデザインコンセプトを配布します

アイディアが浮かばないあなたへ!ワイヤーフレームとデザインコンセプトを配布します

こんにちは!Webデザイナーのいるそらです!
「Webデザイナーになるためにデザイン制作の練習がしたいけれど制作経験が少なく、アイディアが浮かばない…」という悩みを持つ方は多いのではないでしょうか?
そんな方のために今回はWebデザイン制作の練習に役立つ「メイク商品のブランドサイト(LP)」を想定したワイヤーフレームとデザインコンセプトを配布します!

✨こんな方におすすめ今回配布している内容は以

もっとみる
覚えると便利!よく使うFigmaショートカット(総集編)

覚えると便利!よく使うFigmaショートカット(総集編)

こんにちは!Webデザイナーのいるそらです!
時短に欠かせないショートカットですが、もちろんFigmaにも存在します。
本記事では初心者さん向けに、これまでに紹介してきた「覚えておくと便利なFigmaのショートカット」全6回の内容をまとめてご紹介します!

💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。
例えばFigmaで移動ツールを選択したい場合、以下のキー

もっとみる
デザインカンプからコーディング練習! 流行りのレイアウトに挑戦してみよう(クールデザイン)

デザインカンプからコーディング練習! 流行りのレイアウトに挑戦してみよう(クールデザイン)

こんにちは!Webデザイナーのいるそらです。
今回も勉強の一環で作成したWebデザインカンプを配布することにしました!

作成したのは最近流行りの背景は固定されたまま真ん中のスマホ幅コンテンツだけスクロールされる「モバイルファーストなサイト」です。架空のシャンプーのLPを想定して作成してみました。

コーディングの練習をしたい・もっと経験を積みたい方や、自分でデザインを作るにあたって参考にいろんな

もっとみる
覚えると便利!よく使うFigmaショートカット(ズーム編)

覚えると便利!よく使うFigmaショートカット(ズーム編)

こんにちは!Webデザイナーのいるそらです!
時短に欠かせないショートカットですが、もちろんFigmaにも存在します。
本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。
最終回は「ズーム」編です!

💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。
例えばFigmaで移動ツールを選択したい場合、以下のキ

もっとみる
覚えると便利!よく使うFigmaショートカット(オートレイアウト編)

覚えると便利!よく使うFigmaショートカット(オートレイアウト編)

こんにちは!Webデザイナーのいるそらです!
時短に欠かせないショートカットですが、もちろんFigmaにも存在します。
本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。
第5回は「オートレイアウト」編です!

💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。
例えばFigmaで移動ツールを選択したい場合

もっとみる
覚えると便利!よく使うFigmaショートカット(配置編)

覚えると便利!よく使うFigmaショートカット(配置編)

こんにちは!Webデザイナーのいるそらです!
時短に欠かせないショートカットですが、もちろんFigmaにも存在します。
本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。
第4回は「配置」編です!

💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。
例えばFigmaで移動ツールを選択したい場合、以下のキー

もっとみる
デザインカンプからコーディング練習! 流行りのレイアウトに挑戦してみよう(ボタニカルデザイン)

デザインカンプからコーディング練習! 流行りのレイアウトに挑戦してみよう(ボタニカルデザイン)

こんにちは!Webデザイナーのいるそらです。
今回も勉強の一環で作成したWebデザインカンプを配布することにしました!

作成したのは最近流行りの背景は固定されたまま真ん中のスマホ幅コンテンツだけスクロールされる「モバイルファーストなサイト」です。架空のシャンプーのLPを想定して作成してみました。

コーディングの練習をしたい・もっと経験を積みたい方や、自分でデザインを作るにあたって参考にいろんな

もっとみる
覚えると便利!よく使うFigmaショートカット(コンポーネント編)

覚えると便利!よく使うFigmaショートカット(コンポーネント編)

こんにちは!Webデザイナーのいるそらです!
時短に欠かせないショートカットですが、もちろんFigmaにも存在します。
本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。
第3回は「コンポーネント」編です!

💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。
例えばFigmaで移動ツールを選択したい場合、

もっとみる
視覚で伝える力!インフォグラフィックの魅力と活用法

視覚で伝える力!インフォグラフィックの魅力と活用法

こんにちは!Webデザイナーのいるそらです!
今回は情報を視覚的に伝える手段の一つである「インフォグラフィック」についてメリットや事例など解説していきたいと思います!

❓インフォグラフィックとはインフォグラフィックとは情報(インフォメーション)とグラフィック(図形や画像)を組み合わせて、情報を視覚的に表現する手法のことです。

上記の画像では数字やパーセンテージを視覚的に示したり、内容に合ったイ

もっとみる
覚えると便利!よく使うFigmaショートカット(編集編)

覚えると便利!よく使うFigmaショートカット(編集編)

こんにちは!Webデザイナーのいるそらです!
時短に欠かせないショートカットですが、もちろんFigmaにも存在します。
本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。
第2回は「編集」編です!

💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。
例えばFigmaで移動ツールを選択したい場合、以下のキー

もっとみる