いるそら@Webデザイナー

いるそら@Webデザイナー

最近の記事

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

こんにちは!Webデザイナーのいるそらです。 今回は「デザインカンプからコーディングに挑戦してみよう!」のクールデザインを画像付きで公開します。 ↓↓画像なし記事はこちら↓↓ 本記事用に販売できる画像を用意して、画像付きの内容として改めてご紹介させていただきます。 作成したのは最近流行りの背景は固定されたまま中央のスマホ幅コンテンツだけスクロールされる「モバイルファーストなサイト」です。架空のシャンプーのLPを想定して作成してみました。 コーディングの練習をしたい・もっ

¥300〜
割引あり
    • デザインカンプからコーディングに挑戦してみよう!(画像付き)

      こんにちは!Webデザイナーのいるそらです。 以前投稿した「デザインカンプからコーディングに挑戦してみよう」という以下の記事で、配布されているデザインカンプ内の画像もほしいというご要望をいただきました。 その時は販売できる画像ではなかったため、今回は雰囲気の似た別の画像を用意して、画像付きの内容として改めてご紹介させていただきます。 作成したのは最近流行りの背景は固定されたまま、中央のスマホ幅コンテンツだけスクロールされる「モバイルファーストなサイト」です。架空のシャンプ

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

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

        ¥0〜
        割引あり
        • FigmaとAdobe XDどちらが良い?【初心者向け】私がFigmaを推す理由

          こんにちは!Webデザイナーのいるそらです! Figmaも Adobe XDも、プロトタイプ機能を備えたWebデザインを行いやすいツールですが、「どちらのツールを使ったらいいの?」とお悩みの方もいらっしゃるかと思います。 これまでの記事でもFigmaに寄ったお話をさせていただいていますが、これからWebデザインを始められるなら、私はFigmaがおすすめです! なぜFigmaがおすすめなのか、同様にWebデザインを行えるAdobe XDやPhotoshopとも比較しつつ、F

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

        ¥300〜

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

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

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

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

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

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

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

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

          ¥0〜
          割引あり

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

          ¥0〜

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

          こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、これまでに紹介してきた「覚えておくと便利なFigmaのショートカット」全6回の内容をまとめてご紹介します! 💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。 例えばFigmaで移動ツールを選択したい場合、以下のキーを入力するだけで移動ツールに切り替えることができます。 Mac:V Win :V

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

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

          こんにちは!Webデザイナーのいるそらです。 今回も勉強の一環で作成したWebデザインカンプを配布することにしました! 作成したのは最近流行りの背景は固定されたまま真ん中のスマホ幅コンテンツだけスクロールされる「モバイルファーストなサイト」です。架空のシャンプーのLPを想定して作成してみました。 コーディングの練習をしたい・もっと経験を積みたい方や、自分でデザインを作るにあたって参考にいろんなデザインデータを見てたい!そんな方々に役立ててほしいと思っていますので、ぜひチェ

          ¥200〜
          割引あり

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

          ¥200〜

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

          こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。 最終回は「ズーム」編です! 💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。 例えばFigmaで移動ツールを選択したい場合、以下のキーを入力するだけで移動ツールに切り替えることができます。 Mac:V Win :V

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

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

          こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。 第5回は「オートレイアウト」編です! 💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。 例えばFigmaで移動ツールを選択したい場合、以下のキーを入力するだけで移動ツールに切り替えることができます。 Mac:V W

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

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

          こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。 第4回は「配置」編です! 💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。 例えばFigmaで移動ツールを選択したい場合、以下のキーを入力するだけで移動ツールに切り替えることができます。 Mac:V Win :V

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

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

          こんにちは!Webデザイナーのいるそらです。 今回も勉強の一環で作成したWebデザインカンプを配布することにしました! 作成したのは最近流行りの背景は固定されたまま真ん中のスマホ幅コンテンツだけスクロールされる「モバイルファーストなサイト」です。架空のシャンプーのLPを想定して作成してみました。 コーディングの練習をしたい・もっと経験を積みたい方や、自分でデザインを作るにあたって参考にいろんなデザインデータを見てたい!そんな方々に役立ててほしいと思っていますので、ぜひチェ

          ¥200〜
          割引あり

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

          ¥200〜

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

          こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。 第3回は「コンポーネント」編です! 💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。 例えばFigmaで移動ツールを選択したい場合、以下のキーを入力するだけで移動ツールに切り替えることができます。 Mac:V Wi

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

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

          こんにちは!Webデザイナーのいるそらです! 今回は情報を視覚的に伝える手段の一つである「インフォグラフィック」についてメリットや事例など解説していきたいと思います! ❓インフォグラフィックとはインフォグラフィックとは情報(インフォメーション)とグラフィック(図形や画像)を組み合わせて、情報を視覚的に表現する手法のことです。 上記の画像では数字やパーセンテージを視覚的に示したり、内容に合ったイラストを使って表現することで、情報が一目でわかりやすく・伝わりやすいものになって

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

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

          こんにちは!Webデザイナーのいるそらです! 時短に欠かせないショートカットですが、もちろんFigmaにも存在します。 本記事では初心者さん向けに、覚えておくと便利なFigmaのショートカットを全6回に分けてご紹介していきます。 第2回は「編集」編です! 💻ショートカットとは特定のキーを組み合わせてパソコンの操作手順を短縮することです。 例えばFigmaで移動ツールを選択したい場合、以下のキーを入力するだけで移動ツールに切り替えることができます。 Mac:V Win :V

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