「くそダサいデザインの表紙」がダサくなくなるまでの解説がわかりやすくてタメになる…フォントや配色、文字配置など参考になる情報も
デザインtips @tips_bot ゆるく初心者向けのデザイン解説とか書きます。 絵描きさん向けの役立ち情報も多い。なんか思いついた時に自分用のメモも兼ねて投稿しているので、お気軽に〜！
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
採用サイトのための撮影術～社員や職場の魅力を引き出す写真を撮るために | knowledge / baigie
デザイナーの池田です。 ベイジといえばBtoBサイトの印象があるかもしれませんが、実は採用サイトも多く手掛けています。 採用サイトの案件では、ほぼ確実に撮影が発生します。そのため、担当するデザイナーは、撮影にも立ち会い、ディレクションする必要が出てきます。 撮影といっても、何を撮るかによって撮り方も進め方も変わりますが、採用サイトを含む採用目的の撮影となると、以下の条件が前提になってきます。 モデルは社員（プロのモデルではない） モデルは通常、仕事の合間に撮影に参加 日常的な服装やメイク オフィスなどの職場が撮影場所 非日常的な演出より日常の再現 求職者に職場のリアルな雰囲気を伝えるのが一番の目的になるため、日常の自然な風景をカメラに収める必要があるのと、モデルが一般の会社員になるため、スムーズかつ短時間で撮影が済むようにナビゲートしなければなりません。 本記事は、私たちが採用サイトの撮影
メルマガの作り方を現役メルマガ配信者が解説！初心者でもわかりやすく配信の基本から紹介｜メール配信・メルマガ配信ならブラストメール
こんにちは。ブラストメールの森神です。 私はWEBマーケティング担当として広告運用やメディアの運営などをしながら、ブラストメールを使ったメルマガの配信担当をしています。本記事では私の実例を用いながらメルマガ作成のポイントを解説していきます。 メルマガ配信サービスを提供している企業が実際にどのようにしてメルマガを作成しているか気になりませんか？ 今回はそのすべてを公開します。 この記事を読んでわかることは以下の3点。
全世代でスマホがネット利用のメインデバイスに、一方で年齢ごとに利用傾向に差【ニールセン調べ】 | Web担当者Forum
ニールセン デジタルは、2019年1月〜6月のデジタルメディアの利用動向をまとめた「Digital Trends 2019上半期」を発表した。 ニールセン インターネット基礎調査ニールセン ネットビュー（PC版インターネット視聴率情報）ニールセン モバイル ネットビュー（スマートフォン視聴率情報）ニールセン デジタルコンテンツ視聴率（Nielsen Digital Content Ratings）の4つの調査情報データをもとに、PCとスマートフォンの利用実態を分析している。 全世代にスマホ時代到来、代表的な4つのトピックを紹介同レポートでは、各デバイスの利用状況、主要動画サービス利用時間、メディア別動画広告許容度、各SNSアプリの利用者数推移、各ECサービス利用者数比較、フルタイム勤務者1人あたりスマートフォン利用時間といったデータの他、「新元号発表」「超大型連休」「オリンピックチケット」
VSCodeが格段に使いやすくなる、おすすめ拡張機能
作成：2019/05/20 更新：2019/05/20 開発環境 > 私が使っている VSCode のおすすめ拡張機能をまとめました。プログラミングやコーディングの効率を高めたいときに便利なもの。 エンジニア速報は Twitter の@commteで配信しています。 Swift 開発環境 Swift 開発用のエディタにする。 NSHipster 色付けやスニペット補完。 Swift Language VS CodeVim Vim 化させる拡張機能。Atom や VSCode など次々と新しいエディタが出てきてショートカットキーを覚えるのが億劫な人は、Vim化する拡張機能を入れて Vim のキーバインドを使うようにすれば、新しいエディタのキーバインドに振り回されることはなくなるでしょう。素早く打てるようにエスケープは jj に設定しておくとよし。 "vim.insertModeKeyBind
知ってると便利！HTML, CSS, JavaScriptなど、コーディングの作業を快適にするエディタの操作テクニックのまとめ
フロントエンドの制作者は、コードの入力や操作に多くの時間を費やします。最高のパフォーマンスを得るには、エディタを快適に操作する方法を知っておく必要があります。Web制作において、特に有用なエディタの操作方法を紹介します。 Sublime Text, VS Code, Atom, Brackets, Vim, Emacsなど、ほとんどのエディタで操作可能なテクニックです。 Text editing techniques every Front-End developer should know 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 2つのコードを入れ替える 2. エディタでコミット 3. タスクランナーの実行 4. サイドバーを開閉 5. コードを移動 6. 行単位の選択 7. ぎざぎざに選択 8. 選択したワード
SEOの「化石」手法 ～今や絶滅させるべき5つの恐竜たち | Moz - SEOとインバウンドマーケティングの実践情報
「SEOに効果がある」と過去にはされていたが、すでに時代遅れになってしまった「化石」の手法を5つ紹介する。古いやり方ではなく、今の時代に効果がでるやり方もあわせて紹介する。 なかなか認めにくいことだが、僕たちの多くは相変わらず時代遅れのSEO戦術を実践している。そうした戦術には、今なお大きなプラスの影響があると信じているからだ。 今回のホワイトボード・フライデーでは、ランドがそうした「化石」のような古代の手法を挙げ、現在それよりも効果的に機能する代替策を提示しながら、僕たちを優しく正しい方向に導いてくれる。あなたもコメント欄で、ぜひヒントやお気に入りの策をシェアしてほしい！ 化石戦術その1： Google広告のキーワードプランナーに頼ってキーワードを調査する最初に取り上げるのは、以前にも何度か話したことのある、Google広告（旧AdWords）のキーワードプランナーに基づくキーワード調査
長文の記事をアコーディオン表示にして折りたためるプラグイン「Collapse-O-Matic」 – 山田どうそんブログ
山田どうそんです。 あまりに長い記事を書いた場合、「続きはこちら」みたいにして、折りたたんでおけると本当に興味のある人にだけ自分の記事を読んでもらうことができますよね。 導入するだけで、ショートコードで簡単にアコーディオン表示させることができるプラグインを紹介します。 プラグインの特徴 長文記事を折りたたんでおくことができる 導入するだけであとはショートコードを利用するだけなので簡単 プラグインのダウンロード プラグインのダウンロードは下記のリンク先からもできますしWordPress内で「Collapse-O-Matic」と検索してもダウンロードが可能です。現在のバージョンは「1.7.3」。 [appbox wordpress jquery-collapse-o-matic] プラグインの使い方 管理画面の場所 「メインサイドメニュー」＞「設定」＞「Collapse-O-Matic」から設
縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks
モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます！ 明けましておめでとうございます。本年もWebNAUTをよろしくお願い致します。私の新年1本目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター： ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか？ デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます
Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版
こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系... どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないた
Web制作者のためのおすすめChrome拡張15
2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張
GoogleがSEOスターターガイドを大幅改訂。7年ぶりの新版は何が変わったのか？
[レベル: 初級] Google は、『Search Engine Optimization (SEO) Starter Guide』（日本語名: 検索エンジン最適化（SEO）スターター ガイド）を大幅に改訂し新バージョンとして公開しました。 『検索エンジン最適化（SEO）スターター ガイド』とは 『検索エンジン最適化（SEO）スターター ガイド』は、Google が編集した、基本的かつ最重要な SEO の施策をまとめたマニュアル本です。 2008年11月に英語版が公開されました。 2009年6月には、日本語を含む40言語の翻訳版が出されました。 その後2010年9月に、内容を追加した更新版をリリースしています。 7年たった今でも依然として SEO のベストプラクティスだと Google は言うものの、モバイルの最適化がスマートフォンではなくフィーチャーフォンだったりと時代にマッチしなくな
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
フリーランスも知っておかないといけないデザイン料金の相場まとめ
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
少しの一手間が重要なリスクマネジメントに！コピペチェックツール10選
コンテンツマーケティングが広がり、コンテンツの充実を目指す企業が増えてきました。自社で蓄積したノウハウを自社内で記事化するのが理想ですが、中には業務の効率化とコスト削減のため、制作をクラウドソーシングサービスで発注している方も多いのではないでしょうか。 クラウドソーシングに発注する際、懸念点としてあげられるのが記事のコピペ（無断転載）です。もしかしたら、あなたが発注して納品された記事も、どこかから無断転載されているかもしれません。そんなとき、納品された記事がコピペされていないかをチェックするツールが、*「コピペチェックツール」*です。 今回は、コピペがなぜいけないのか解説した上で、調査に有効なコピペチェックツールをご紹介します。 コピペしてはいけない理由 コピペとは、「コピー（複写）＆ペースト（貼り付け）」の略語です。文章や画像をコピーし、別の場所にペーストすることを指します。 誰かが作っ
human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
ヒューマンピクトグラム2.0は、非常口のあの人のピクトグラムをTopeconHeroesダーヤマの好みで拡張、ストックしていくページです。 このサイトにストックしたピクトグラムは、WEB制作や会議の資料、企画書などのデザイン素材として無料で利用可能です。 ただし素材そのものの再配布、販売はNGっす。なお2.0だからって拡張元のピクトグラムに比べ優れている訳ではありません。 犬の散歩のピクトグラムその３ 飛び膝蹴り 社長、部長 ショートカット 手荷物検査 略奪婚 結婚式のピクトグラム 神父、牧師 ちゃぶ台返し 2 水球 ピクトグラム シンデレラ サムライ 3 サンタクロース 2 サンタクロース バーテンダーのピクトグラム2 バーテンダー 銅鑼 銅鑼をドーン 虫取り少年 少年時代 やり投げ 食事をするピクトさん 演説するピクトさん エスカレーター 下校する子供
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How To Make A Media Query-less Responsive Card Component | CSS-Tricks
1カラムレイアウトはもはや王道! Webサイトデザインの基本を解説 | Webデザイン、これからどうなるの？（全10回）
HTML Responsive Web Design