Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane

2024/04/11 622 users Akane 株式会社Rabee 新人デザイナー 雑誌 参考事例

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌... 続きを読む

Midjourneyを１年間使って見つけた、Webデザインに使えるプロンプト全ガイド

2023/11/13 579 users Midjourney 画像生成AI 具現化 web イラスト

「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そう... 続きを読む

CSS Stock｜Webデザインを楽にするCSSコピペサイト

2023/05/27 568 users コーディング CSS 順次 HTML パーツ

当サイトについて 「CSS Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。 あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。 ちなみに新しいスニペットを順次... 続きを読む

デザインシステム入門！Web制作初心者が知るべき基本原則とFigma活用法

2023/05/08 180 users 基本原則 Web制作初心者 Monday EMI USA

Webデザイン デザインシステム入門！Web制作初心者が知るべき基本原則とFigma活用法 Monday, May 8th, 2023 この記事について この記事は、スマートフォン時代のWebデザインスクール や スマートフォン時代のWebコーディングスクール の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USA... 続きを読む

効率よくコーディングを進めるためにChatGPTを使ってみよう

2023/04/24 439 users chatgpt EMI コーディング EMIさん 寄稿記事

Web技術 効率よくコーディングを進めるためにChatGPTを使ってみよう Tuesday, April 25th, 2023 この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインや... 続きを読む

実例から考えるUIの情報設計｜usagimaru｜note

2022/12/24 207 users 混乱 usagimaru UIデザイン 分野 Note

情報設計とは、端的に言うと「情報に関する混乱を整えて、理解しやすい形にする行い」です。情報設計というとなんとなくWebデザインやUIデザインに関する専門的な分野として認識されることが多いかもしれませんが、“情報” に関することなので、情報があるところには基本的にどこにでも通用します。 情報設計の専門書を漁... 続きを読む

なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design

2022/10/24 570 users Figma用 Apple プラグイン URL 編集

WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力す... 続きを読む

Webデザインに悩まない、心をつかむ最新サイト30選まとめ

2022/09/13 146 users

Webサイトのアイデアに困ったときは、多くの優れた参考サイトを見ることが、次のデザインへとつながります。 なぜなら、レイアウトや配色、文字組みなど実践的なプロのテクニックを学びつつ、変化の早いトレンドも確認できるのが理由です。 この記事では、デザイナーが参考にしたい最新ウェブデザイン30個をまとめてご紹... 続きを読む

モバイル幅で作成されたWebサイトの特徴と作例

2022/07/19 245 users 作例 特徴 CSS Webサイト デバイス

2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイ... 続きを読む

無料で「Photoshop」「Illustrator」「WordPress」などWebデザインが学び放題に！／事業譲渡に伴い有料会員サービスを終了した学習サイト「chot.design」の全レッスンが無料公開

2022/06/20 622 users Illustrator Photoshop 事業譲渡 放題

続きを読む

Webデザインの有料学習サイトが無料化　IllustratorやPhotoshop入門などが見放題

2022/06/14 927 users Illustrator Photoshop UIデザイン

Webデザインの有料学習サイト「chot.design」を運営するちょっとは全コンテンツを無料公開した。「Photoshop」や「Illustrator」の基礎レッスンからUIデザインやバナー制作テクニックを紹介する本格的なレッスンまで571本を公開している。 Webデザインの有料学習サイト「chot.design」を運営するちょっと（東京都中野区... 続きを読む

未経験から100話でキラキラWEBデザイナーを諦めるかけだしちゃん完結「最後らへんでだんだん不穏になってきたけど…」

2022/05/08 554 users 未経験 最後らへん pic.twitter.com 100話

かけだしちゃん @kakedashi_chan 未経験から100話でキラキラWEBデザイナーを諦めるかけだしちゃん その4 キラキラWEBデザイナーへの第一歩！SNSアカウントを作るよ～！ #Web制作 #webデザイン #コミックエッセイ pic.twitter.com/Tu7NZAFyG7 2022-01-21 20:00:59 続きを読む

2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS

2022/01/17 151 users スタイ シャドウ メタバース CSS 奥行き

クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイ... 続きを読む

2022年1月：デザインの参考にしたい魅力的なWebサイト14選 | Web Design Trends

2022/01/12 163 users Web Design Trends ヒント トレンド 参考

2022年1月の最近見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つかったりするなど、様々なメリットがあります。ぜひ自身の好みに合うような素晴らしいWebサイトを探してみてください。 2... 続きを読む

2022年に流行するWebデザインの最新トレンド10個まとめ | Web Design Trends

2022/01/05 316 users Web Design Trends ミニマリズム トレンド

2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWebデザインの10個の最新トレンドをご紹介したいと思います。1つ1つのトレンドごとに実際のWebサイトの事例を掲載している... 続きを読む

Webデザインの種明かし、コピペできる最新HTML／CSSスニペット30個まとめ - PhotoshopVIP

2021/09/03 114 users CodePen PhotoshopVIP 種明かし コピペ

この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。 Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。 https://photoshopvip.net/12989... 続きを読む

Web制作者は1冊持っておくとかなり便利！UIに適したさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザイン アイディア帳 実践編 | コリス

2021/08/06 287 users コピペ 実装 カスタマイズ 手順 背景

Webページに動きやアニメーションを加えたい、毎回検索で探している、実装の手順を解説してほしい、そんな時にすぐに役立つコピペで利用でき実装方法もカスタマイズもていねいで分かりやすい解説書を紹介します。 動きやアニメーションのコードはサポートサイトから最新版がダウンロードでき、要素表示、背景の動き、エ... 続きを読む

はてなに居る人達は、はてなの衰退を止められなかったのは何故だろうか

2021/07/01 509 users 衰退 サブカル はてな 最先端 文章

はてなは一時期はWebの最先端を走っていたはずだ。 Web技術、デザインといったものから、文章や漫画やサブカルといったものもあった。 はてなアンテナで情報感度の高い人が何を見ているのか知ることもできた。 どの時点から狂ってきたのか。 Webデザインはもうブックマークすらされなくなった。 2ch系のニュース板のよう... 続きを読む

Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/17 228 users 依存性 初見 Pulp Note Tips 12個

Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありました... 続きを読む

あなたのWeb制作をサポートしてくれるオンラインツール10選 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/01 309 users Pulp Note Tips transform 現場 あなた

Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 CSS 3D Transform Examples CSS 3D Transfor... 続きを読む

Webデザインの参考になるギャラリーサイト11選 | Pulp Note

2021/04/19 385 users Pulp Note 参考

フリーランスとして一人で制作をしていると、どうしても自身のスタイルの中だけでデザインしがちなので、新たな刺激を求めて書籍やネットを徘徊してデザインを見るようにしています。今回は、私がデザインを見たい時に頻繁に徘徊しているサイトを１１個紹介します。クライアントとの打ち合わせ時も実際のサイトを見なが... 続きを読む

会社のwebデザイナーが無能すぎてヤバいｗｗｗｗ

2020/11/08 305 users Webデザイナー やばいｗｗｗｗ psd 会社 プログラマー

去年の冬に転職したweb系のプログラマー。 今の会社のwebデザイナーが無能すぎてしんどい。 以下愚痴 1. photoshopでwebデザインすんな！photoshopで作ったpsdのwebデザインを渡されて、フロントエンド担当がHTML/CSSコーディングしてるんだけどどうなのこれ？ なんでphotoshop使うの？webページ作るんでしょ？最初からH... 続きを読む

Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは | アンドエンジニア

2020/06/16 515 users インタラクション アンドエンジニア デザイナー えん 分業体制

Webサイト制作では通常、「デザイナーの作ったデザインをエンジニアが実装する」という分業体制が一般的。 しかし、今回なめサンは、サイトの見た目・動きのデザインから開発まで、すべてひとりで行っている。 優れたアニメーションやインタラクション（ユーザー操作へのフィードバック）をデザインし、自ら実装するエン... 続きを読む

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

2020/01/14 232 users Stocker.jp diary Wednesday 議論

Webデザイン 「Webデザイナーはコーディングできるべきか」という議論に対する私の考え Wednesday, January 15th, 2020 【平日夜開催】スマートフォン時代のWebデザインスクール 体験レッスン開催！モダンなWebデザイン制作・Adobe XD・Photoshop・UI/UXなど基礎から学べる講座です。 【日曜開催】WordPress でWebサイト... 続きを読む

2020年用、日本語のフリーフォント417種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス

2019/12/12 637 users フリーフォント コリス フォント 商用 クライアント

個人でも商用でも無料利用できる、日本語のフリーフォント417種類を紹介します。 Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる無料フォントが満載です！ ついにフリーフォントのまとめが、400種類を超えました！ 初紹介のフォントから既存フ... 続きを読む