WEBデザインをガラッと変える！2018年良質デザインから学んだテクニック、考察｜mountain_kow
昨年あたりから気になっているデザインテクニック、よく目にするものメモ。 テクニック① キービジュアルの上下左右（主に左側）に余白を大胆とり、キャッチコピーを配置写真全面に配置した場合、キャッチコピーをどう置くかにポイントがあるのではないでしょうか？ 以下に紹介しましたキービジュアルはWEBサイトの横幅いっぱいには配置せず上下左右に大きく余白が使われています。その為キャッチコピーが視認しやすく、背面の写真に影響を受けることなく配置できています。 紙面を思わせるレイアウトで余白が美しくなります。 Swim http://www.swm.jp/ 住信SBIネット銀行 2018年 新卒採用サイト https://contents.netbk.co.jp/pc/recruit/ ONECRAFT WEDDING http://onecraftjapan.com/ 株式会社レインボー・ジャパン htt
「とにかくお金をかけずに独学でWebデザインを習得したい！」という方のために、できるだけ無料か激安で独学する方法を紹介します。 独学の前に求職者支援訓練を検討しよう 独学をする前に検討してほしいのは、求職者支援訓練（ハロートレーニング）や職業訓練の活用です。国が提供する無料でWebデザインを学べる学校があります。僕も求職者支援訓練を経て、Webデザイナーになりました。 今まで未経験からWebデザイナーを目指す方のご質問に200件以上回答してきました。 みなさんとお話をする中で知ったのは、多くの方が独学を途中で挫折し、このサイトを通して求職者支援訓練の存在を知って、訓練校に通い直していることでした。それくらい独学は大変です。自分でモチベーションを維持し続けて、無駄のない順序で学習をする必要があります。ちょっと一ヶ月独学した程度ではWebデザイナーにはなれません.。 学校なら効率的に学習できま
未経験の主婦でもできる！WEBデザインの在宅ワーク未経験からWEBデザイナーになるまでの道のり、仕事の探し方、おすすめの勉強方法などをまとめました。 こんにちは、主婦でWEBデザインの仕事をしているポチママです！ 最近はクラウドワークス中心にWEBデザイン案件を受注していますが、 冬休みの間は子供が家にいるので仕事量を調整中。。。 働く時間を自分でコントロールできるのは在宅ワークならでは。 あらためてWEBデザインの仕事は子供のいる人にぴったりの仕事と感じています。 私はテックキャンプ・デザイナー転職でWEBデザインの基本を学びました。 ＞こちらの記事も参考に♪ 「未経験の主婦でもできる！WEBデザインの在宅ワーク」 10週間、徹底的にWEBデザインの知識と技術を詰め込み、 おかげさまで今もWEBデザインの仕事ができていますが、 最近、もう少しスキルアップがしたくなりました。 WEBデザイ
【Webデザイン】マージンと情報構造の関係を知るだけで良い感じのUIになる｜TechRacho by BPS株式会社
こんにちはニシです。久しぶりにリングフィットやったら筋肉痛が痛い。 今日はマージンの話です。 たまーにデザインなしでフロントの実装をしているエンジニアの方から、UIが上手くキマらないという相談が入ります。 大抵の場合、デザイナーが見るとどうして上手くいかないのか、どうやったら上手くいくのか、というのはすぐわかります。 今回は、デザイナーがどういう考え方でデザイン・設計しているのか、を言語化していこうと思います。 あんまり深い話をすると長くなるので、まず私が大事だと思ったマージン（余白）と情報構造の話に絞って書きます。 マージンは情報構造と深い関係があります。これを理解すると、「適当にいい感じで実装」が上手くいくようになるのではないかと思います。 今回はこんな人向けの記事です 初級デザイナー フロントエンドエンジニア UI/UXに興味ある人 ※本記事では余白のことをマージンと表記しております
ブログ HubSpot日本語ブログでは、世界中のHubSpotの知見を活かし、日本のビジネスパーソンの課題解決に繋がるような情報を提供しています。
【お知らせ】 2000名以上の人生を変えるキッカケになった「好きなことで生きていく！WEBデザイナーという働き方セミナー」では、 WEBデザイン業界の「最新」ウラ事情WEBデザイナーにおける「未経験OK」のワナWEBデザインの学習で失敗した「しくじり先生」の話などをお伝えしています。今だけ無料で開催しているので「WEBデザインの学び方がわからない」「WEBデザイン業界について知りたい」という方はぜひご参加ください。 ＞＞詳しくはこちら WEBデザインのビジュアルのトレンド20選開いた瞬間に「かなり昔に作られたインターネットサイトだろうな」と、感じるデザインをたまに見かけることがありますよね。 古いデザインだと更新をしていない印象を与え、ユーザーは情報が最新ではないかもしれないと感じ、離脱する原因になりかねません。 インターネットサイトを開いたときの第一印象はやはり見た目で決まるので、トレン
Adobe XDでグリッドシステムのレイアウト枠を作る - グリッドシステムを使ったレイアウトとレスポンシブWebデザインについて｜tkpea
Adobe XDでグリッドシステムのレイアウト枠を作る - グリッドシステムを使ったレイアウトとレスポンシブWebデザインについて この記事では非コーダー向けに、グリッドシステムを使ったレイアウトとレスポンシブWebデザインの考え方、AdobeXDでレイアウトグリッドを作る時の操作方法について書きます。 AdobeXDの内容は初見で触ってみて自分なりに模索した方法なので、他に良いやり方があればご教授ください。 グリッドシステムとはWebデザインに於いて、横並びの要素を配置する時「要素の幅はどれくらいか？」「要素同士の隙間はどれくらいか？」を決定するときのガイドラインになる枠組みのことです。 スマートフォンの登場以来、様々なデバイスの画面サイズへの対応が求められる現在のWebデザインでは、この枠組みを基準にデザインされていることが多いです。 実例例えば↓こんなデザインがあったとして、 これに
実際フォントをえらんでWEBデザインしてる現場から
https://note.com/arisan_designer/n/n77e068511f5c こちら、フォントの歴史の話が珍しくホッテントリまで上がってたんで、まあちょっと嬉しくなったんで。 まあフォントはみんな好きなんで、いろいろブコメつくんだけど、まあ「知ってても何の役に立つんだ」「海外仕事するとき以外無用知識」的な「半端にイキってんじゃねーよ」的コメとか「読みづらい文字死すべし」的「デザインは理論原理主義」、「小林章さんが全て言い尽くしてる」っていう「有識者権威主義」はたまた「〇〇が好きなフォントです！」的「無邪気なフォントLOVER」がそれぞれワイワイいって、「で、どうすりゃいいんだ」ってなかなか意見が出んよね。 まあわっしもそんなに決定版的回答出せるほどの絶対的知識ないんだけど、現場で選んでるときの一例だせれば「ほーん」てなるかなって。 元記事の歴史的な背景知ってるときに、有
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、ノーコードツールの「STUDIO」を使ってWEBデザインギャラリーサイトを作ってみたので、こだわりや過程について書こうと思います。 STUDIOのCMS機能を使うにあたり、参考になった記事も紹介しています！ぜひご覧ください。 ※タイトルで「モバイルファーストって、何？」と思った方は、以下のnoteがおすすめです！とても勉強になります✍ はじめに｜作ったサイトの紹介タイトルでも少し触れていますが、今回わたしが作ったのは「モバイルファーストのサイトに特化したWEBデザインギャラリー」です。 モバイルファーストのサイトって、真ん中がつるつる動くのが非常にかわいいですよね？ あの挙動をたくさん眺めたいな〜と前々から思っていたものの、私が探した範囲では、モバイルファースト特化のギャラリーサイトは見当たらず。 それなら！という
WEBデザインで重要なフォントの選定ですが、英語フォントはたくさんあるのに日本語フォントが少なくて困っていませんか？ 今回はそんな時に役立つ「メインとして使える日本語フォント」を厳選して13選ご紹介します。 番外編では変わったフォントや面白いフォントも紹介していますので、最後までぜひチェックしてみてください。 ゴシック体Noto Sans JPWEBデザインで最も多く使われているフォントです。 シンプルで明るい印象のデザインで、長い文章や小さなサイズでも読みやすいのが特徴です。 英文でも読みやすさを損なわないため、スタイリッシュからオーソドックスなデザインまで幅広く使える万能フォントです。 ■参考デザイン例 引用元：https://81-web.com/font/noto-sans/ > ダウンロードはこちら Sawarabi Gothic（さわらびゴシック）オーソドックスなNoto Sa
WebデザイナーやWebディレクター、アーティストやクリエイターには欠かせないポートフォリオサイト。 ポートフォリオサイトの作り込みは、自身の仕事のお問い合わせの数に大きく影響を与えます。 特にフリーランスのような、個人の名前で食べていく人たちにとっては、いかに自分の魅力を届けたい相手に届けるかが問われます。 どこかで見たことあるようなものではなく、印象に残るようなポートフォリオサイト。 今回は、これからポートフォリオサイト制作を検討している方に向けて、参考にしていただきたい、ハイレベルなポートフォリオサイトをまとめてみました。
更新日: 2021年3月10日公開日: 2020年9月1日【2021年版まとめ】Webデザイン・LPデザイン制作の参考サイト デザイナーにとって、日頃からたくさんのデザインを見て自分のデザインの引き出しを増やすことはとても大切です。 また、Webデザインを勉強するとき・デザインを制作するときにも、インスピレーションを求めて参考サイトを探している方も多いかと思います。 今回は、フリーランスのWebデザイナーとして活動しているわたしが日頃チェックしているギャラリーサイトをご紹介します。 更新頻度が高く、最新のデザインが追加されているサイトのみ選びました！ ぜひ、ご自身のデザインにインスピレーションと学びをプラスしてください。 目次 Webデザインギャラリーサイト8選 LPデザインギャラリーサイト2選 バナーデザインギャラリーサイト2選 最後に Webデザインギャラリーサイト8選1.スマホファー
監修した「コンバージョンを上げるWebデザイン改善集」が2020年6月29日にマイナビ出版より発売されます！ #コンバージョンを上げる本 - Real Analytics （リアルアナリティクス）
＜お知らせ＞ この記事は移転しました。約5秒後に新記事へ移動します。 株式会社HAPPY ANALYTICS 公式サイトよりお読みください。 監修に携わった「コンバージョンを上げるWebデザイン改善集」が2020年6月29日発売されることになりました！めでたい。 コンバージョンを上げるWebデザイン改善集 作者:井水大輔,菊池達也,井上清貴,谷脇しのぶ 発売日: 2020/06/29 メディア: 単行本（ソフトカバー） ★電子書籍版も発売日前後に出る予定です 私は執筆ではなく「監修」という立場で入っております。監修って何しているの？って思われるかもしれませんが、そちらは本記事の最後に触れます！まずは本書の内容から紹介させてください。 本書の内容 下記のような感じで色々な改善事例が掲載されている部分がメインとなります。どの事例も「改善前」と「改善後」が載っているだけではなく、その部分を改善す
ふわっ（CSS） | 動くWebデザインアイディア帳
See the Pen 4-1 最低限覚えておきたい現れ方 - ふわっ by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね！↑ 動きを実現する仕組み CSS アニメーションで実現するフェードインの現れ方です。 このサンプルは、画面を開いたらすぐに動きます。 スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。 HTMLの書き方 <div class="fadeIn">ふわっ（その場で）</div> <div class="fadeUp">ふわっ（下から）</div> <div class="fadeDown">ふわっ（上から）</div> <div class="fadeLeft">ふわっ（左から）<
この記事では、進化を続けるWebデザインの最新の実例サンプル33点をまとめてご紹介します。 世界中の優れた実例サンプルを実際に見ることで、印象や配色、レイアウト、書体などの新しいアイデアや発想を手に入れましょう。 アイデアに困ったときの参考サンプルとしても活用できるので、2021年のWebデザイントレンドと一緒にチェックしてみてはいかがでしょう。 Webデザイン制作の見本に！すぐれた最新実例サンプル33点まとめ Umami Land Googleによる日本食を外国人向けに紹介したページで、食べものを探しながらステージを進めていく、ゲーム要素を盛り込んだ体験型ウェブサイト。Googleマップと連動しており、近くで食べれるお店もリコメンド。 Good Meat 一般的に食用とされている鶏誕生の由来から、今後の代替肉への消費の移行までを解説する、ストーリーテリング手法を用いたウェブサイト。 Na
在宅ワークでキャリアップに不安を抱える会社員の約8割が「転職」を検討 約3割が「在宅のうちにWebデザインスキルを身につけたい」 - 記事詳細｜Infoseekニュース
在宅ワークでキャリアップに不安を抱える会社員の約8割が「転職」を検討 約3割が「在宅のうちにWebデザインスキルを身につけたい」 - 記事詳細｜Infoseekニュース 在宅ワークでキャリアップに不安を抱える会社員の約8割が「転職」を検討 約3割が「在宅のうちにWebデザインスキルを身につけたい」 - 記事詳細｜Infoseekニュース～Webデザインスクールに求められるポイント、「自分の好きな時間に受講できる」、「即戦力レベルのスキルが身につく」など～株式会社日本デザイン（本社：東京都豊島区、代表取締役社長大坪拓摩）は、キャリアアップの意向があり週5日以上、在宅勤務を実施している東京の会社員106人を対象に、「コロナ禍のキャリア… ┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘┘ 誰でも自分の「得意」を生かして商いができるココナラ いつでも・どこでも、好きな時間にちょこ
「未経験・初心者からWebデザイン副業を始めたいけど、始め方・ロードマップがまったくわからない…」 「完全初心者でも、Webデザイナー副業で現実的に稼げるようになれる？」 「Webデザイン副業で稼げる月収・収入や、未経験でもできる副業案件が知りたい」 あなたはこのように悩んでいませんか？ 最近は「副業」を始めたい方がとても増えています。
悩んでいる人・Webデザインのトレースって意味あるの？ ・デザイン力を効率よくスキルアップできるトレースの方法ってあるの？ webデザインのトレースは、やり方次第でその効果は大きく変わります。 デザインスキルを一気にレベルアップさせることもできれば、まったく何も身につかない場合もあります。 今回は、現役Webデザイナーの著者が、デザイン力が確実に身につくトレースのやり方を、見本付きで説明していきます。 使用ツール 使用ツールに関しては、自分がこれからメインで使っていきたいツールを使用しましょう。 トレースにより得られる効果の1つには、「ツールに慣れることで作業効率が上がる」というものがあります。 新しいデザインツールに触れる、乗り換えるといった時は、トレースをすることがツールに慣れる近道です。 最近は、プロトタイピングツールであるXDでデザインカンプを制作する人も増えているので、XDでトレ
Webデザインにメリハリを！参考になる見出しデザインまとめ
見出しデザインもページの印象を決める大事な役割を持っています。 個人的な話ですが、私はホームページやランディングページを制作している際、見出しのデザインに割と悩むことが多いです。。 本文テキストとのフォントサイズで差分をつけたもののいまいち目立たなかったり、ただかっこいいデザインではなく、効果的なWebサイトにするために可読性も考慮したかったりと、試行錯誤する部分のひとつでもあります。 今回は「見出しとしてのデザインの分かりやすさ」と「可読性」を前提に、日本語テキストが入っているもののみに限定していろいろな見出しを調査しました。 ここから、効果的な見出しデザインを作るポイントを考察していきましょう。 カラーを変える https://kowa-dan.com/ まずはシンプルに、見出しのカラーを変えたものをご紹介。 ページのデザインによってはこれだけでも充分目立つ見出しになります。 英語と日
【2022年 デザイナー向け】Webデザインの横幅（コンテンツ幅）は何pxにする？ 2021.07.01 2022.02.27 Tips Webサイトデザイン時、アートボードやコンテンツ幅のサイズは何を基準に決めていますか アートボードやコンテンツ幅のサイズはデザインするときにはじめに決める基準となるものですが、どうやって決めていますか？ この幅のサイズはその時代の技術やデバイスのなどの変化・進化を反映して少しずつ変わってきています。そのためWebサイトの幅だけで、ひと昔前のような雰囲気を醸し出してしまうこともあります。 もし自分の定番サイズで何年も作り続けている場合、知らずのうちに「今」のデザインと少しずれたものを作ってしまっているということも起こり得るかもしれません。 アートボード幅、コンテンツ幅を決めるときの指針としているものと、私自身が最近選択しているサイズについてご紹介していきま
Webサイトのデザインやアプリデザインを考える際、どうデザインすべきか悩んでしまいがちなのが「UI UX」ではないでしょうか。「どう設計すれば良いUI UXになるのか分からない」「イメージはあるけどうまくデザインに落とし込めない」という方も少なくないでしょう。 そこで今回は、UI UXデザインやWebデザインの参考になるおすすめのサイトを38選紹介します。 ぜひ、自身の作りたいWebサイトやアプリデザインの参考にしてみてください。 なお、UI UXデザインに悩んだ際は「UX専門家の支援」を受けるのもおすすめです！ ニジボックスでは、UX改善への第一歩を踏み出せるサービス「Begin UX!」をご提供しています。 自社サイトやアプリのUI UXデザインに課題感をお持ちの方は、ぜひ気軽にご相談ください！ UI UXデザインとは そもそも、「UI UXとは何なのか」「聞いたことはあるけど、詳しい
2019年8月に読んだWeb・デザイン関連の本
2019年8月26日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ 簡単だけど、すごく良くなる77のルール デザイン力の基本
このサイト内に掲載している多くの動きは、jQueryというライブラリをベースにして動かしています。 「画面が読み込まれた後に動く」「スクロールしたら動く」「クリックしたら動く」 といった代表的な「動くきっかけ」の記述の仕方を理解していきましょう。 動くきっかけを指定する基本的な記述
こんにちは、ちょっと株式会社の久保田です。 「錯視」と言えば、かの有名なエッシャーの立体錯視によるだまし絵や、あるはずの無い色が見えてしまう錯視や直線が曲がって見える錯視などなど、世の中には数多くの錯視効果が存在します。 この錯視ってやつ、見た目を狂わせてくるのでデザイナーとしては非常に厄介なもの。 錯視による小さな違和感がグッドなデザインを台無しにすることも珍しくありません。 乱暴に言ってしまえば“視覚のバグ”なので「だって人間だもの」と割り切ってしまうこともアリです。だって人間だもの。 しかし、そんな視覚のバグすらコントロールしてやろうって考えるのも当然のこと。だってデザイナーだもの。 錯視効果と処理例は色んなところで紹介されていますが、ここではWebデザインで意識したいものだけに絞って3つほどピックアップしてみました。 上方距離過大の錯視最も有名で、最も意識すべき錯視な気がします。
Last updated on 2020/10/14 image:Apple こんにちは（・∀・） 新型iPhone 12の発表に伴いiPhone画面解像度のページを更新しました。 iPhone画面解像度一覧 この一覧に掲載されている情報は2020年10月の時点でアップルストア オンラインで購入できる製品の情報です。Apple製品取扱店で購入できる製品の情報は過去ページ【2020年4月】iPhone画面解像度まとめからご覧いただけます。
WEBサイトを立ち上げる際、非エンジニアであってもプロジェクトにアサインされることはよくありますが、その際、知識不足でエンジニアさんとのやり取りに苦戦される方は多くいらっしゃるのではないでしょうか。 今回は、近年特に需要が高まっているレスポンシブWEBデザインについて、開発を行う際に必要な知識をアウトプットしていきます。 レスポンシブWEBデザインとは まず、レスポンシブWEBデザインとは、ブラウザの画面幅によってWEBサイトが最適に表示される仕組みを持ったデザインのことです。 特徴としては、PC・タブレット・スマートフォン（以下、SPとする）などのデバイスによって表示を変えるのではなく、ウィンドウサイズによってレイアウトが変化する仕組みです。デバイスごとにHTMLファイルを作る必要が無く、単一のHTMLファイルであらゆるデバイスに対応することができます。 SPでの閲覧需要が高まりSP版へ
デザイン 2019/10/25 Webデザインは独学でマスターできる？身に付けるべきスキルとオススメの勉強法まとめ Webデザインが優れているかどうかは、閲覧者のサイト滞在時間やそれに伴う収益に大きく影響します。Webデザイナーという職業も一般的になってきましたが、多くの人は、学校などで専門知識を身に付けなければならないと考えています。 この記事では、「Webデザインとは何か」から「独学でのWebデザイン勉強方法」までをご紹介します。 Webデザインは独学できる？Webデザイナーの仕事＆スキルとは Webデザインに関する知識は幅広く、完全な独学で学ぶのは難しいでしょう。ただし、本や動画などを上手に活用すれば、スクールなどに通うことなく学習することができます。 Webデザインの知識を身に付けると、 就職の時に使える「ポートフォリオ」を作成できる Webデザイナーは比較的新しい職種のため求人数
【紙→Webデザイン】サイトの『動き』はなんのためにあるんだろう？と考えた話｜nao | NO DEZAIN Inc.
こんにちは。 都内の制作会社、NO DEZAINでデザインをしているnaoです。 紙→Webの違いについて気づいたこと、学んだことのアウトプット。 今回は、Webならではの大きな要素のひとつ『動き』についてです。 最初の壁『動き』紙媒体は動きません。 なのでぶっちゃけてしまうと『動き』って何？ というのが、Web沼へやってきて最初にぶつかった壁というか、疑問。 よくわからん…と思っていました。 それこそサイトを見るだけだった立場の頃は、やたらと動くサイトに対して「酔う」「探しているものに辿り着きづらい」「そんなに何度も動かんでも」…など、邪魔なものというイメージでした（「酔う」は三半規管よわよわなので今もある🥺） …と、ややマイナス印象の『動き』の中で、一番最初にハラ落ちしたのがマウスオーバー時のホバーアクション。 色々なサイトに当たり前に見られるけど、ホバーも動きのひとつ。押せる？押せ
【2024年版】挫折しない！Webデザイン独学で勉強する無料学習の方法と注意点。 卒業なしのWebデザインスクール｜クリエイターズファクトリー大阪なんば・心斎橋校
大丈夫だよ！ Webデザインは独学でも身につけることができるよ。今回はその方法を教えます。 でも確実に早く身につけたいなら、スクールとか考えてもいいかもね！ Webデザインは、勉強を始めればだれでも身につくかも？と思ってませんか？ 確かに継続すればできるようになりますが、多くの人が学習の途中で挫折してしまいます。。 Webデザインの勉強は、流れや注意点・学習方法をしっかりと把握しておけば、独学でも十分勉強することが可能です。 ただ時間がかかることはご了承ください。 この記事では、挫折せずに独学でWebデザインを勉強する方法をお伝えします。 無料で学習できるサイトも紹介しているので、ご自身で勉強したいと考えている方は参考にしてください。
2023年7月に読んだWeb・デザイン関連の本
2023年7月27日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 配色アイデア手帖 めくって見つける新しいデザインの本 第2版
See the Pen 6-1-2 フェードイン・アウトさせて全画面で見せる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の動きを確かめてね！ 動きを実現する仕組み slick というスライドショーを実現するJavaScript ライブラリを使い、HTML 内の<li>にCSS で指定した背景画像をスライドさせる。 ※今回は背景画像にしていますが、画像でもスライドは実現できます。 ［使用するライブラリ］ ＊ jQuery ＊ slick（https://kenwheeler.github.io/slick/） HTMLの書き方 head終了タグ直前にslickのCSSと自作のCSSの2つを読み込みます。 <link rel="stylesheet" type="text/css" href="https://cdn.jsdeliv
Webサイトのフロントエンドを実装するうえで、アニメーションやエフェクトなどのアイディアがほしい！と言う時には、CodePenというサービスがおすすめです。ウェブ制作時、フロントエンドで使用する技術のコードの共有や外部サイトへの埋め込みができるサービスです。そんなCodePenの中でも背景の表現として使えそうなアイディアをまとめてみました。 l CodePenとは？ HTML、CSS、JavaScriptのコードを書くとその場で表示を確認できるWebサービスです。無料と有料がありますが、無料で十分使えます。 ・自分が書いたコードを共有できる ・人の書いたコードを編集できる ・ウェブサイトに画面を埋め込める l 背景アニメーション/エフェクト
XDを使ったwebデザイン模写の方法 | ずくろぐ
こんにちは！ちづみ(＠098ra0209)です。私は小学校教員から現在はフリーのwebデザイナーとして活動しています。 今回はwebデザインの独学方法として、サイト模写の具体的な方法を記していきます。 なぜ模写がいいのか 「綺麗だな」「見やすいな」と感じるデザインにはデザインの基礎がしっかり導入されているからです。 プロの方の作ったサイトを模写することで、デザイナーにとって大切な「観察力」を上げ、デザインの観察を通して多サイトの共通部分を見出し、より具体的な数値や特徴に落としこむことでそれをそのまま実務に生かすことができます。 まねして作ってその特徴をとらえていくことによって早く確実にwebデザインに必要な力がつきます。 まず模写するサイト ではどんなサイトを模写しようと考えた時に私はまずコーポレートサイトの模写をおすすめします。 理由は２つあって１つは私自身、お仕事で作るものはコーポレー
# 基本事項 使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。 文章の頭位置を揃え、他の要素とのベースラインも揃える。 文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。 日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基本的に右揃えの文章は使用しない。 中央揃えは利用場所を考慮する。見出しなどの短いテキストに用い、長い文章ではなるべく中央揃えを使わない。 視覚に障害がある方は細身の多いフォントは読みづらい。アクセシビリティ対策として文字のウェイトには気を配る。 画像として使用するテキストは適宜アウトライン化する。 長いテキストリンクを連続して使用しない。 文章の区切りをハッキリさせる。 無意味な改行は厳禁。 # フォント フォント選びは賢く、要件やWebサイトの雰囲気に合ったものを選ぶ。 フォント
【コーディング練習用】Webデザイン入門オリジナルデザインテンプレート - ABCウェブエンジニアblog
このところWebデザイン入門用の記事を多く書いてきました。 模写コーディングの超初級サイト3選記事など、厳選してみて思ったのが、もっと入門用に最適なサイトはないかという事。 シンプルでミニマルかつ、自然と頻出タグなどが身につくようなサイト。。。 ▼なるべく入門者に適したサイトをピックアップした記事です。 webabc.hatenablog.jp 探してみましたがご紹介したサイト以上のものはなかなかありませんでした。 そこで、無ければ作ってしまおうと。 今回はWebデザイン入門に最適なコーディング練習用のサイトデザインテンプレートを作成してみましたので、ご紹介します。 是非練習用にお役に立てれば幸いです！ Webデザイン入門コーディング練習用オリジナルテンプレート では今回作成したPCサイトのコーディング練習テンプレートをどうぞ。 ▲上記画像を右クリックから「名前をつけて画像を保存」等してご
See the Pen 5-1-9 スクロール途中でヘッダーが消え、上にスクロールすると復活 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内をスクロールして動きを確かめてね！ 動きを実現する仕組み jQueryを使い、指定のエリアidの高さ以上スクロールをしたら、ヘッダーにクラス名を付与する。 クラスが付与されたらCSSで非表示にする。 さらに、JavaScript でスクロール値の比較を行い、上にスクロールをしている間はヘッダーを出現させるためのクラス名を付与して、CSSでヘッダーを表示する。 ［使用するライブラリ］ ＊ jQuery HTMLの書き方 head終了タグ直前に自作のCSSを読み込みます。 <header id="header" class="DownMove"> <h1>Logo</h1> <nav> <ul id
デジLIGのLIVE授業「超効率的なWebデザイン勉強法！講座」の内容をご紹介します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デジタルハリウッドSTUDIO by LIGの運営担当の天（@10TEN10TAN10）です！ デジタルハリウッドSTUDIO by LIGのというWebクリエイタースクールの運営をしています。 デジタルハリウッドSTUDIO by LIGとは 株式会社LIGとデジタルハリウッドが業務提携をしてはじめたクリエイター養成スクールのこと。Webデザイナーや動画クリエイターを目指す方向けのカリキュラムを展開している。無料説明会は、上野・池袋・大宮にて毎日開催中！！ カリキュラムの中に、「LIVE授業」という、オンラインで開催している授業形式の講座があるのですが、今日はそのLIVE授業の様子をちょっとだけお見せしちゃいます！！ LIVE授業って何？ STUDIO by LIGの受講生に向けて実施する、オンラインでの授業形式の講座を「LIVE授業」と呼んでおり、月に3〜4回開催していま
【webデザイン】そのフォント指定どうして必要なの？ - ゴシック体VS明朝体編 -｜TechRacho by BPS株式会社
2019.12.13 【webデザイン】そのフォント指定どうして必要なの？ - ゴシック体VS明朝体編 - こんにちは。デザインチームのスギムラです。 タピオカばっかり呑んでましたが最近は仙草ゼリーの方が好きです。 冬のタピオカはホットが良いと聞いたのでホット飲んだら想定よりめちゃくちゃ甘くてもたれました。 暖かいと人の味覚は甘さを強く感じるんですね… アドベントカレンダーなので今年こそはクリスマスっぽいネタをとおもいましたがそんなにクリスマスっぽい面白ネタが思いつかないのですぐに諦めました。 今回はWebデザインをするときのフォントのお話をしようと思います！ 今回の経緯 以前、デザイナーのニシが書いた記事にエンジニアの常川から熱いレスが届きました。 曰く、「なぜ『デザイン上、明朝体を絶対に使いたい時がある』のか一発で理解できるように納得できる記事を見てみたい」とのことでした。 デザイナー
See the Pen 9-4-2 SVG アニメーションを使い、手書き風アニメーションを実現 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね！ 動きを実現する仕組み 仕組み ⇒ SVG形式のベクターデータを利用して、CSS、JavaScriptを使って動かす。 長所 ⇒ 拡大縮小しても画質が劣化しない。 短所 ⇒ 制作ソフト、もしくはプログラムの知識が必要なので、導入にひと手間かかる vivus.jsというライブラリを使用して、アウトライン化したテキストの上でマスク用のパスが動き、徐々にテキストを出現。 ※サンプル9-4-2（※サンプルデータ：https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/9-4-2/9-4-2.zi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
独学でWebデザインを勉強するための完全ガイド | 未経験からWebデザイナーへ！【2024年版】
未経験の主婦でもできる！WEBデザインの在宅ワーク
Webデザインの参考になるギャラリーサイト20選＆2020年のトレンド解説
2023年のWEBデザイントレンド30選｜2024年の流行も先取り | 生き方・働き方・日本デザイン
STUDIOで、モバイルファースト特化のWEBデザインギャラリーを作ってみた｜akane
[Google Fonts]WEBデザインで使える無料日本語フォント13選 + 番外編
Webデザインの参考に！ハイレベルなポートフォリオサイト21選 | デジハリ・オンラインスクール
『Gitが、おもしろいほどわかる基本の使い方33』が半額！ KindleストアでWebデザイン・技法書フェア／『WordPressユーザーのためのPHP入門 はじめから、ていねいに』は50％OFFの1,320円【Book Watch/セール情報】
【2021年版まとめ】Webデザイン・LPデザイン制作の参考サイト
Webデザイン制作の見本に！すぐれた最新実例サンプル33点まとめ - PhotoshopVIP
【初心者向け】未経験のWebデザイン副業の始め方！案件や月収を現役デザイナーが解説
webデザインスキルを効率よくあげるトレースのやり方 | これだけデザイン
【2022年 デザイナー向け】Webデザインの横幅（コンテンツ幅）は何pxにする？ - moromi web
UI UXデザインやWebデザインの参考になるおすすめサイト38選を紹介 | 株式会社ニジボックス
jQueryで動く「きっかけ」を指定しよう | 動くWebデザインアイディア帳
Webデザインで意識したい3つの錯視効果｜chot Inc. デザイナーユニット
【2020年10月】iPhone画面解像度まとめ | Webデザインラボ
【非エンジニア向け】レスポンシブWEBデザインでの開発に関わる方が知っておくべきこと｜セブンデックス
Webデザインは独学でマスターできる？身に付けるべきスキルとオススメの勉強法まとめ｜Udemy メディア
フェードイン・アウトさせて全画面で見せる | 動くWebデザインアイディア帳
l Webデザイン 背景アニメーション/エフェクト15選｜DAI
個人的に実践しているWebデザインガイドライン⑤ テキスト編｜TAK / Web Creator.
スクロール途中でヘッダーが消え、上にスクロールすると復活 | 動くWebデザインアイディア帳
SVGアニメーション2 | 動くWebデザインアイディア帳