Webデザインアワード受賞！お客さま目線のサイトでPVが劇的改善。「日本テレビアート」リニューアル秘話 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webデザインアワード受賞！お客さま目線のサイトでPVが劇的改善。「日本テレビアート」リニューアル秘話 こんにちは、Webディレクターの平山です。 LIGではこのたび、日本テレビアート様のコーポレートサイトのリニューアルを担当しました。 コーポレートサイト 本プロジェクトでは、リニューアルによってコーポレートサイト経由のお問い合わせを増やすこと、そしてサイトを訪問した方々がワクワクするようなデザインを目指しました。今回は担当デザイナーの石田とともに、日本テレビアート様を訪問。LIGにリニューアルを依頼した背景や制作過程のエピソード、完成サイトの感想などを伺いました。 サイト制作、リニューアルをご検討の企業の方は、ぜひご一読ください。 株式会社日本テレビアート 日本テレビのグループ会社で、日本テレビの番組制作に関わる美術、照明、グラフィック、Webなどのデザイン全般を手掛ける。また放送業界で
2020年新しく生まれ変わった iPhone SE の Web ページでも採用されている CSS の sticky。 iPhone SE 2020 の商品ページ（LINK） 今回は実際にいくつかの sticky のサンプル・プログラムを交えて、 sticky 体験を行っていきたいと思います。 "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録 Webデザイン志望の方必見！CSSの「sticky」を使いこなそうstickyとは sticky は CSS p
Webデザインの勉強やトレンドキャッチに役立つSNSアカウントおすすめ25選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGブログ編集部です。日々トレンドが移り変わるWeb業界。みなさんはどのように情報をキャッチしていますか？ 今回はLIGデザイナーに聞いた、Webデザインの勉強やデザインのトレンドキャッチに役立つSNSアカウント（Twitter・Instagram）をご紹介します。 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 Webデザインの参考になるアカウント Web界の3大デザインアワードといわれる、「CSS Design Awards」「FWA」「Awwwards」のアカウントをご紹介します。 CS
基礎から解説！Webデザインにおける解像度とRetina対応について知ろう！ | D-FOUNT -大阪・京都のグラフィックデザイン／Webデザイン-
解像度とは？ まず最初に、解像度には下記の2つの意味があります。 ①密度という意味［単位：ppi］②ディスプレイのピクセル数（画面解像度）という意味［単位：px × px］ なので一言で解像度といっても、①と②のどちらの意味なのか、その時の文脈から判断する必要があります。 例えば、Webで使用する画像において「解像度2倍の画像」というと、密度が2倍なのではなく、ピクセル数（大きさ）が縦横それぞれ2倍という画面解像度の意味を指します。 ①と②について以下で簡単に見てみましょう。 ①密度としての解像度 密度としての解像度は、「1インチの幅の中に何個のピクセルがあるか」を表します。 単位はppi［pixel per inch（ピクセルパーインチ）］です。
Adobe XDでモバイルファーストのWebデザイン入門 第4回: レイアウト機能を使いこなしてレスポンシブデザインを効率的に作成！
Adobe XDでモバイルファーストのWebデザイン入門 第4回: レイアウト機能を使いこなしてレスポンシブデザインを効率的に作成！ 連載 Adobe XDでモバイルファーストのWebデザイン入門 前回は、アセットパネルでスタイルを管理して効率よく見た目を仕上げる方法と、複数箇所で使用する要素をコンポーネントとして扱うメリットを紹介しました。今回は、レスポンシブデザインには欠かせない、サイズの異なる画面へのデザイン展開に役立つ機能やテクニックを紹介します。 お詫び：3月12日から21日までの10日間、一部のテキストが表示されず、また、画像があるべき場所とは異なる場所に表示される状態になっていました。発見が遅れたため、多くの皆さまにご迷惑をおかけしたことをお詫びいたします。 ※この記事は2020年2月公開のバージョン27に対応しています。 __ Adobe XD 無料体験版 ダウンロード _
オンラインのプログラミングスクール「CodeCamp」、Webデザイン制作に必要なスキルを習得できる新カリキュラムを提供開始
コードキャンプは、Webデザイン制作の実務プロセスを体験しつつ、必要なスキルを習得可能な新カリキュラム「Photoshop CC 2.0」「Illustrator CC 2.0」の提供を、同社が運営するオンラインのプログラミングスクール「CodeCamp」にて4月6日に開始した。新カリキュラムは、「デザインマスターコース」と「オーダーメイドコース」で受講できる。 新カリキュラムでは、Webデザイナーの実務プロセスに沿って、バナーデザインやデザインカンプ（完成見本）制作の演習を行い、実務経験のない人でもWebデザインに必要なスキル習得を目指せるカリキュラムとなっている。 同カリキュラムは、Web制作現場で用いられるデザインツールの機能やノウハウについて、“最短距離で効率的に学ぶ”をコンセプトに開発されており、現場で使えるスキルを無駄なく身につけられる。 受講イメージ 受講対象は、 未経験から
斜めレイアウト / 斜めラインに関する日本のWebデザインを掲載しています。Web Design ClipはWebデザイン制作の参考になる国内のWebサイトをクリップしています。
マーケター視点、不動産業界に特化している、ツールを使用して作成された、スマートフォンのみ、など目的ごとにWebデザインを閲覧することができるギャラリーサイトを７サイト紹介します。 Choicely マーケター視点で選ばれたwebデザインを集められているギャラリーサイト。 コミュニケーション設計に優れたWebサイトをまとめているとの事で、たしかに使いやすさを感じるサイトが多く紹介されています。他にもマーケティング企業やマーケティングツール、メディアサイト、Webサービス、と用途によって分けてまとめられているのもおもしろい。マーケターがチェックしたいギャラリーサイトです。 Webデザインギャラリー | Choicely REAL ESTATE DESIGN GALLERY. 国内の不動産業界のWebデザインを紹介しているギャラリーサイト。 他のギャラリーサイトでも不動産カテゴリーでまとめられて
こんにちわ❗ Roseberryです🙋♀️✨ 本日のご訪問もありがとうございます✨ そんな本日の「ハピ活ライフ♬」は・・・ Webデザインの独学って何から始めればいいの？どうやって進めていくの？ という方に、おススメの記事となっています。 こんな人におススメの記事です！ ・Webデザインの勉強って独学でもできるの？ ・Webデザインの独学方法は？ ・Webデザインを勉強できるおすすめサイトって？ 私は以前、在宅でデザイン（Webデザイン）系の副業をやっていました。 元々は、デザインツール（「Photshop」「illustlator」）を独学でスタート。 その後、会社のホームページ制作を任されたので、そこでWebデザインを独学で学びました。 そんな経験を踏まえてこの記事では、Webデザインを独学で学んでみたい方向けに、わかりやすくまとめています。 最後まで読んで頂くと、Webデザインを
独学でWebデザインの勉強がしたいんだけど「無料で学べるサイトはないかな？」「最初はできるだけお金をかけずに、安い学習サイトで学べたらいいな」そんな風に思っていませんか？ この記事では、Webデザイナー・グラフィックデザイナー歴20年の私からみて、初心者向けで、なおかつ無料で独学でWebデザインを学習できるサイトをまとめてお伝えします。 私自身も前から〜今でもお世話になってる、役立つサイトを、本当に惜しみなくご紹介します。 Webデザインを学びたいけど「無料で始めたい！」方は必見です！ デザインをメインに学ぶなら「chot.design/ちょっとデザイン」がおすすめ 画像引用：chot.designWebサイトより chot.designは、Webデザイン初心者におすすめの無料でデザインを学べる学習サイトです。 実際にWebデザイン会社やIT企業で働いている、現役Webデザイナー達がカリキ
10〜18pxのフォントサイズ早見表そのため、読みやすさを意識して作られたWEBサイトはほとんどがこのサイズになります。 Googleが推奨しているのも16pxなので、16px以下だと小さくて読みづらいと判断され、「モバイルフレンドリーではない」とモバイルで使用できないことがあります。 検索順位を下げてしまう可能性もあるため、SEOを意識してWEBサイトを作る場合など、特に注意しましょう。 対象ユーザーによってフォントサイズを調整する基本は16pxを選択するのがベストですが、対象となるユーザーの年齢層によってはもう少し大き目のフォントに設定したほうがよい場合もあります。 例えば子供向けや高齢者向けのサイトであれば、17px～18pxで設定することがおすすめです。 16pxはあくまでも目安です。これが一番だと固定してしまうのではなく、どのような層に一番読まれるかということも意識してフォントサ
Webデザインに役立つそうなツールやリソースを収集、投票やお気に入り登録も可能なキュレーションサイト・「DesignValley」
DesignValleyはWebデザインに役立つそうなツールやリソースを収集、投票やお気に入り登録も可能なキュレーションサイトです ユーザー登録は不要で利用可能で、集められた沢山のツールなどから自分にとって有益なツールのリストを作れます ツールやリソースはデザインシステム、インスピレーション、プロトタイピングやモックアップ、アクセシビリティなど、多くの業務を求められるWebデザイナーにとって、あると便利なものを各カテゴリに分けられています Webデザインに関わる方は覗いてみては如何でしょうか DesignValley
レスポンシブなWebデザインが当たり前になっており、その表示確認が大変になっています。Webブラウザの幅を変えたり、スマートフォンやタブレットでの表示を確認したりしている方は多いでしょう。 そうした手間を減らせそうなのがResponsive Viewerです。一気に複数デバイスでの表示を確認できます。 Responsive Viewerの使い方 こんな感じでまとめて表示を確認できます。 幅が広いタブレットでの表示も確認できます。 クリック連動で、一つの画面でリンクをクリックすればすべての表示が変更されます。 インスペクタで全デバイスでの要素の場所を確認できます。 横方向での表示確認も。 Responsive Viewerを使えば指定したデバイスでの表示をまとめて確認できます。スクロール追従もできるのですが、筆者環境ではうまく動きませんでした。デバイスの種類は追加できますので、Android
# 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。 基本配色とはベースカラー・メインカラー・アクセントカラーの3種。 ＜ベースカラー＞ 全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるために明度が低い無彩色を使用することが多い。メインカラーの明度を上げた色をベースカラーに使用するのも定番。 ＜メインカラー＞ カンパニー・カラーなど、テーマとなるような一番主張させたい色。ロゴやキービジュアル、メインコンテンツなど、ユーザーに対して主張させたい部分に使用する。 ＜アクセントカラー＞ その名の通りユーザーにより注目させたい箇所や見落として欲しくないポイントに用いる、その名の通りアクセントとなる色。ベースカラーやサブカラーとは色相や彩度が異なった色を選択することが多い。 メ
「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」を一通りやってみての感想 - デザインキブン
こんにちは🌝 以前から勉強していた「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」が昨日で一通り、完了しました！ CHPTER5以降になると、CSSの指定も増えてきたりレスポンシブデザインを考えたり、初心者の私は頭がこんがらがってきていました💦笑 なので、頭を一晩休めて今日の午前中改めて復習。少し整理できたので、やってみた感想をブログに書こうと思います。 昨日はタイル型Webサイトとお問い合わせページの制作にチャレンジ 昨日進めた部分のおはなし。 まずはタイル型レイアウトのwebサイト制作を進めました。 仕上がりはこんな感じ↓ 2枚目の左上の写真を拡大したレイアウト、横の小さい画像と少し高さがズレている。。きになる。。 が、どうしていいかわからず😭 ここら辺はいろいろ制作していくにつれて。。かな。 そして次にお問い合わせページの制作。 仕上がりはこんな感じ↓ はじめ、
アニメーションの指定方法 このサイトで紹介しているサンプルコードの多くは、CSSのanimation プロパティを使用して動かしています。 ※transitionプロパティを使うこともできますが、より細かい動きの設定が可能なanimationを主に採用しています。 アニメーションの基本設定は、animation-nameにつけた名前に対し、keyframesで動きの変化を指定します。 また、アニメーションの繰り返しや、変化する時間の調整などの設定も追加できます。 See the Pen CSSアニメーションで動きを指定しよう by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね！↑ アニメーションはまとめて指定できます！
レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。 今回紹介するResponsively Appはそうした表示をまとめて行えるアプリになります。スクロールやイベントの追従もできます。 Responsively Appの使い方 立ち上げました。iOS系とノートPCでの表示をテストしています。 Webサイトを変えると、全体に反映されます。 表示を横に並べる形にしました。 表示するデバイスを選択します。カスタムサイズも可能です。 表示するデバイスを絞り込めます。 横向きに変更しました。 デバイスを指定して開発者ツールを開けます。 Responsively Appはクリックイベントをすべての表示に対して適用したり、ホットリロードにも対応しています。サイト
当ページに含まれる広告と商品評価について 当ページには広告リンクが含まれており、当ページを経由して商品・サービスの申込みがあった場合、提携している各掲載企業から広告報酬を受け取ることがあります。ただし、当サイト内のランキングや商品の評価に関して、提携の有無や報酬の有無に一切関わらず、コンテンツポリシーに基づき、当サイト独自の調査と実際に使用したレビューをもとに掲載しております。当サイトで得た収益は、皆様により役立つコンテンツを提供するために、品質向上等に還元しております。
レスポンシブWebデザインを実装するためのTips
「レスポンシブ」って単語を知らない人でも、ウィンドウをｳｨﾝｳｨﾝさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね～」とか言っちゃうアレです。 どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら１サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない？ スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………🙄 何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ？？？？？？？？ とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。 最初に確認（決定）すること ブラウザ・端末の対応範囲 大事なことなのでめったに使わない赤字にした。 最新2バージョン以内のモダンブラウザ
レスポンシブ対応｜Webデザインツール｜Editor X
ワイヤーフレームからプロダクションまで Web デザインのプロセスをどこまでもシームレスに。洗練されたレスポンシブ CSS をドラッグ＆ドロップで実現できます。
「海住さん、どこのデザインスクール通ってましたか？？ 僕もテクニカルスキル(特にUXらへん)を身に着けたいなと思い学習方法を模索中です」 ある朝会社の同僚に聞かれました。 意欲が高くて素晴らしいなあと思いつつ、良い回答が瞬時に思いつかなかったので、デザインスキルの棚卸しがてらこれまでの経験を書いてみます。 👶 22歳〜24歳（2年1ヶ月） にちゃんねるで見つけた神保町の化学メーカーに就職。プラスチックの開発支援など。 「業界冊子の広告枠（A4半分くらい）を買ったので広告作ってみて」と隣の部署のおじさんから仕事をもらった結果、目玉が飛び出るほどダサい広告をニコニコと提出し、絶句される。 この時初めて”ベクター”という概念を知る。 認識は「でっかくしてもぼけない、なんかすごいデータ。」 👦 24歳（3ヶ月） 会社をやめて無職になる。 西武新宿線沼袋駅の5万円木造アパートで一人暮らし、2時間
2021年1月に読んだWeb・デザイン関連の本
2021年1月29日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ イメージをパッと形に変えるデザイン大全
2020年3月に読んだWeb・デザイン関連の本
2020年3月30日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ [改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]
高品質なサンプルを 作りながら学べる Web制作のワークフロー に沿って学べる コーディングに適した プロトタイプが作れる 本書はAdobe XDを使ったWebデザインとUIのプロトタイピングを、高品質なサイトを作りながら、現場のワークフローに沿って学んでいく本です。 ワイヤーフレームの作り方から、ビジュアルカンプ制作、デザイン要素の効率的な制作と管理、インタラクティブなプロトタイプ制作、 画面遷移やコーディングに必要なデザインスペックの共有、さらに動きのあるUI設計やプラグイン活用まで、現場レベルで求められるスキルを、より実践的な学び方で習得できます。 初学者から、現場経験が浅い新人デザイナー、さらにグラフィックデザインからWebへキャリアを広げたい方まで、しっかりWebデザインを学びたい、あらゆる方のための一冊です。
Adobe XDでモバイルファーストのWebデザイン入門 第1回: デザインする前に知っておきたいワークスペースの使い方とファイル管理 - Adobe Blog
Adobe XDはWebやアプリなどデジタル体験デザインのためにアドビが提供している最新のデザインツールです。「考える速度でデザインする」をテーマに開発されただけあって、軽くて操作しやすいのが特徴で、無料で使えるプランもあるので、これまでPhotoshopなど他のデザインツールを使っていたけれどXDも気になっているという方は多いのではないでしょうか。また、これからWebデザインを学ぶためにXDを覚えたいという方もいらっしゃると思います。 そこで、この連載では、Adobe XDを使ってレスポンシブデザインのページをデザインする手順を全6回に分けてご紹介します。ワイヤーフレームから始めて、完成したデザインを開発者に共有するまでに最低限必要なXDの機能を学べる構成になっています。 第1回は、XDを初めて触るデザイナーの皆さまために、XDを使ってデザインを始める際に知っておきたい基礎知識をご紹介し
週刊Webテク通信 2021年3月第3週号1位は、新しいWebデザインのトレンド「オーロラUI」、気になるネタは、Appleが初代HomePodの販売を終了、好評のminiに注力 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2021年3月8日～14日の間に見つけた記事のベスト5です。 1. Aurora UI — new visual trend for 2021 | by Michal Malewicz | Mar, 2021 | UX Collectivehttps://uxdesign.cc/aurora-ui-new-visual-trend-for-2021-c763a7daa7e2 新しいWebデザインのトレンドとしてオーロラUIを紹介しています。ぼかしと自然なグラデーション
/*========= 背景動画設定のCSS ===============*/ /*header設定*/ #header{ position: relative;/*ローディング画像などを表示す際の基点とするため指定*/ height: 100vh;/*高さを全画面にあわせる*/ text-align: center; color: #fff; /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/ background: url("../img/movie.jpg") no-repeat; background-size: cover; } /* ローディングアイコン設定 */ #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font
Webデザインを教えるって実際どうなの？学びや働き方を聞いてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デジタルハリウッドSTUDIO by LIG（以下：デジLIG）の運営担当の天（@10TEN10TAN10）です！ デジタルハリウッドSTUDIO by LIGとは 株式会社LIGとデジタルハリウッドが業務提携をしてはじめたクリエイター養成スクールのこと。Webデザイナーや動画クリエイターを目指す方向けのカリキュラムを展開している。現在、上野・池袋・北千住・町田・川崎・大宮にて受講生を募集していて、無料説明会は毎日開催中！ 現在デジLIGでは、トレーナーを募集しています！ トレーナーってどんなお仕事しているの？ と気になる方も多いと思うので、今回はデジLIGの立ち上げからお世話になっているトレーナーさんに、これまでのデジLIGのことや、デザイナーに求められるスキル、これから期待していることをインタビューさせていただきました！ これからのWebデザイン業界に興味のある方はもちろ
実務やブログで使える、シンプルな CSSボタンデザイン&エフェクト20選 - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ
私がこれまで見てきたボタンデザインたちWebデザインパーツをまとめたサイトを作っていくなかで、素敵だと感じたエフェクトやデザインはたくさんあります。その中でも「実務で使えそうなもの」を想定しながら、HTMLとCSSだけでボタンを作りました。 見た目はシンプルだけど、hover時のエフェクトで違いを出しています。 さらに使用している矢印ななどは画像を一切使わず純粋にCSSのみで再現しているので、本当にコピペするだけで再現できます。 このコードはSCSSを使用しています。CSSを確認したい場合はview compressedをクリック！HTML + CSS オンリー ボタンデザイン+エフェクト20選 参考サイトwebデザインのパーツ参考のサイト10選の記事も書いてます！よかったら見てね
Illustrator【Illustrator】イラレでPNG画像の色を変更する方法 2024年4月7日 kentarotamari https://design-spot.jp/wp/wp-content/uploads/2021/12/ds_logo27.png DesignSpot デザインスポット
スライドショー | 動くWebデザインアイディア帳
書籍情報 紙面だからこそできるまとめ方でコードを説明し、 全体を俯瞰して調べることが出来る構成になっています。 もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。 購入をしてくださった方には特典がありますので是非チェックしてみてください！
【2024年版】独学でWebデザインを学ぶ！おすすめ本14冊まとめ&便利な勉強サイト 卒業なしのWebデザインスクール｜クリエイターズファクトリー大阪なんば・心斎橋校
独学でWebデザインを学ぶのに最適なオススメデザイン書籍 デザインを学ぶにはWebでも書籍でも実際に学んでみたことを実践してみることが、デザインの上達の近道です。 デザインの基本的な考え方や初心者向けの情報を覚えて、自分が作りたいデザインが作れるようになるまで、新しい知識をいれてみてくださいね。 デザインの教室 このブログ記事の執筆でも参考している、これから初めてデザインを学ぶ方に一番最初に進めたい書籍です。 書籍と学習素材がセットでついてくるので、書籍の内容に合わせて実際のファイルを見ながら学ぶことができます。 またかなり初心者向けの知識や参考例が豊富に載っているので、情報が多すぎて最初は全てを理解するのは難しいですが、デザインの教科書として1冊持っておいて損はないでしょう。
機能・要素から探すWebデザイン参考ギャラリー・リンク集 | Web Design Garden | 毎日更新！Webデザイン参考ギャラリーサイト
AMUSE RECRUIT 2025｜株式会社 アミューズ 採用サイト｜AMUSE INC. RECRUITMENT
2021年度CPU大賞 書籍部門1位を受賞！拙著『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』
2021年度CPU大賞 書籍部門1位を受賞！拙著『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』 2022年3月10日 お知らせ 全国の書店員さんの投票で決定する2021年度CPU大賞「書籍部門」の大賞を、拙著『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』が受賞しました！ ↑私が10年以上利用している会計ソフト！ CPU大賞って？ CPUとはコンピュータ関連の書籍を発行する出版社7社が加盟する「コンピュータ出版販売研究機構」のこと。CPU大賞は2021年1月1日から12月31日に発売された書籍を対象に、全国主要書店158店舗のコンピュータ書籍の担当者による投票で、最も票数が多かった書籍が選定されるそうです。 そんな素敵な賞に1位として選ばれました！前作『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』に続き、二度目の受
この記事の概要 Webデザインは「最終的にHTMLとCSSで表現される」ことは揺るぎません。 イケてるデザインツールを使おうが、流行りのフレームワークを使おうが、最後に存在するのはHTMLとCSSです。1 というわけで、避けては通れないHTMLとCSS。 コードを書かない人でもある程度は理解しておきたいものです。 この記事では「どんなデザインも最終的に構造化された文書（= HTML）で表されるのだから、初めからそのつもりで作る」を念頭に置いて考え方やトレーニングについて書きます。 細かなタグの使い分けやテクニックというより、文章全般を構造化して捉えるための記事です。 HTMLのテクニック自体は別の記事で書こうと思っています。 Webデザインの前に、日頃のドキュメントを考える いきなりWebデザインを対象に話を進めると、構造だけでなくあしらいにも目が行ってしまいかねません。 そのため、まずは
Adobe XDでモバイルファーストのWebデザイン入門 第2回: ワイヤーフレームをサクサクつくろう！ | Adobe Blog
本連載の第1回では、Adobe XDを使い始める前に知っておきたい基礎知識をご説明しました。第2回からは、実際にWebサイトのデザインに取り掛かります。制作するのは【架空のミュージシャンのWebサイト】です。 この記事では、デザインの最初のステップとして、XDの［長方形ツール］と［テキストツール］を使い、ワイヤーフレームを作成する手順を解説します。XDを使うと、ワイヤーフレームを直感的にサクサクつくることができます。特に［リピートグリッド］は、コンテンツをいくつも並べては直すことの多いワイヤーフレーム作成の本当に強力な味方です。 なお今回は、ワイヤーフレームのラフスケッチが存在する状態からの作業を想定しています。このように、アイデアレベルのデザインを、実際にデバイスの画面で確認しながら形にするにはXDは最適のツールです。もちろん、ゼロからXDを使ってワイヤーフレームを試行錯誤するのもオスス
本書で紹介しているデザインのコードをご案内します。 解説で理解したコードの表示確認用としてご利用ください。 Prologue 本書を読む前に
Webサイトは「HTML」という文章の構造を組み立てるマークアップ言語と、装飾やレイアウトを指定するための「CSS」という言語で作られています。Webデザイナーにとって非常に重要なスキルである「HTML・CSS」の使い方を解説します。
タグ WEBデザインおしゃれかっこいいアートイラストレーターインパクトカラフルクールコントラストシンプルチラシバナーフォトショップフライヤーポスターポップ中級編中級者向け初心者向け反復名刺女性向けデザイン整列男性向けデザイン落ち着き資料近接
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Webデザイン】CSSの『sticky』を使いこなそう
Web Design Clip | Webデザインギャラリー・クリップ集
目的毎に探せる！テーマに特化したWebデザインギャラリーサイト7選 | Pulp Note
Webデザインの独学って何から始めればいいの？【勉強方法あり】 - ハピ活ライフ♬
Webデザインの無料独学サイト【成功者が誰にも教えない】20選
フォントサイズのベストな設定は？可読性の高いWEBデザインのポイント | 生き方・働き方・日本デザイン
Responsive Viewer - レスポンシブWebデザインをまとめて確認
個人的に実践しているWebデザインガイドライン② 配色編｜TAK / Web Creator.
CSSアニメーションで動きを指定しよう | 動くWebデザインアイディア帳
Responsively App - レスポンシブWebデザインを効率化
WEBデザインスクール・講座おすすめ19選【2024年5月最新比較】 | 株式会社EXIDEA
「Webデザインスキルを身に付けたい」に対するアドバイス｜うみすみ
『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』
2021年3月第3週号 1位は、新しいWebデザインのトレンド「オーロラUI」、気になるネタは、Appleが初代HomePodの販売を終了、好評のminiに注力 | gihyo.jp
YouTubeを使って、画面全体に背景動画を流す | 動くWebデザインアイディア帳
DesignSpot デザインスポット｜webデザイン&グラフィックデザインの情報サイト
Webデザインをするにあたり、構造化された文書を意識する - Qiita
デザイン目次 | 現場で使えるWebデザインアイデアレシピ サポートサイト
はじめてのWebデザイン『HTML・CSS』入門 | chot.design
WEBデザイン独学の参考になるおしゃれなテクニックを32種類紹介します！ | デザイン研究所