Webサイト用素材データを送受信する際にこんなこと思い当たりませんか？ 素材をフォルダに放り投げてしまい、必要なときに探しづらくなってしまっている とりあえず手元にあるデータを送って終了にしてしまっている お客様とのやり取りは丁寧にするけれど、社内のデータ管理は同じように丁寧にできていない どの素材を送ったかよくわからなくなってしまうことが多々ある 今日こそはフォルダやデータを整理しようと思っているけれど、いっこうにその日が来ない 個人のスマホで撮影した写真データであれば、日付抽出、お気に入り、撮影地など自動で振り分けされ、ファイル名を気にする事は日常ほぼありません。 でも、Webディレクターの仕事の現場では、画像データやテキストなどあらゆるデータをお客様から受領し、デザイナー・エンジニアが使いやすいよう整理、ファイル形式変更、リネームして渡すという場面が多く見られます。 ルールが揃ってい

いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS

「こんなことできちゃうの?!」「もっと早く知りたかった。」 この記事では、ホームページ制作を快適にする最新オンラインツール48個をまとめてご紹介。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな便利な新ツールを揃えています。 時間の短縮はもちろん、面倒だったあの作業も自動化できてしまうことも。 大型連休中におすすめのワクワクするようなツールを集めました。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール（14個） 2. デザインツール（13個） 3. 配色ツール（5個） 4. プロトタイプ・アイコンツール（6個） 5. クリエイティブ・面白ツール（10個） Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール Loaders

はじめに Webエンジニアの皆さん、日々の業務お疲れ様です。皆さんは、さぞや楽しいエンジニアライフを送っていることでしょう。最近は技術の進歩も落ち着いてきましたので、Rustなんかに手を出して、先行者利益を目論んだりしているのではないでしょうか。 さて、そんな楽しい中、たまにやってくる何とも言い難い案件というのが「WordPressのテーマ作成」です。普段、大規模開発や自社サービスに携わっている方は、WordPressに関わることはないかもしれませんが、請負業務やフリーランスの方には、ふと湧いてくる案件でもあります。そして、何かと言い訳を付け、できる限りWordPress関連の案件は避けているのではないでしょうか。 なぜ、エンジニアはWordPressを嫌うのか エンジニアというのはWordPressを嫌う傾向にありますが、それは何故でしょうか。 プライドがゆるさない WordPress界

UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか？私は迷います。 ですので、最近使っているツールを紹介します。 世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。 パワポで描く まずはPowerPointです。 エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。 パワポのメリット パワポは、ビジネスユーザーならほぼ誰でも使える システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。 パワポ

大規模サイトから個人ブログの作成まで、幅広い用途で活用できる無料CMS『WordPress』。使い勝手の良さが特徴で、便利なコンテンツ作成機能が多数搭載されています。 また、近年では文章や画像を「ブロック」単位で管理するブロックエディタ（Gutenberg）が標準搭載されるようになり、コンテンツのレイアウト調整も簡単になりました。 しかし、WordPress上でほかのコンテンツとの差別化につながる高度なカスタマイズをしたい場合は、デフォルト機能だけでは不十分。機能を拡張できる「プラグイン」を活用するのがおすすめです。 今回は無数にあるプラグインのなかから、WordPressのコンテンツを強化できるプラグインを10個ご紹介します。

CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptのフォーマッター、各種エンコード・デコード、QRコードの生成、カラー値変換、画像の最適化、ファビコン画像生成、ダミーテキスト生成、各種PDF変換など、Web制作に役立つツールがまとめて利用できるToolsOceanを紹介します。 便利なツールが一箇所で利用できるので、ブックマークしておくと便利です。 ToolsOcean ToolsOceanは完全に無料で利用できるオンラインツールが、たくさん用意されています。登録など面倒なことは一切ありません。 いくつか使用してみました。まずは、CSSの軽量化。 CSSだけでなく、HTML、JavaScriptの軽量化、整形も揃っています。

フォトショップで漫画コミックのようなイラスト風に加工する方法は、人気エフェクトのひとつです。 画像を差し替えるだけのお手軽エフェクトやベクターイラスト風に仕上げる方法も紹介しましたが、今回はより手軽に漫画イラスト加工ができるデザイン素材をまとめてご紹介。 ワンクリックするだけでプロのような仕上がりを実現できる、他と差のつく便利デザインツールが揃います。 アクション素材の使い方もとてもシンプルなので、はじめての人でも簡単に利用することができます。 フォトショップで写真を水彩イラスト風に一発加工！おすすめ素材25選 まずはAdobe公式サイトより、Photoshopを無料でダウンロードし、7日間のお試しからはじめてみませんか。1087円/月からフォトショップが使える、フォトプランもおすすめです。 フォトショップで漫画コミック風イラストに一発加工！おすすめ素材10選 Urban Sketch –

Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ

本記事は Designers Week 2022春 5日目の記事です。 🌳 4日目 ▶▶ 本記事 ▶▶ 6日目 🌳 こんにちは。 Webコンテンツ制作をしているチームで、デザイナー歴3年目ホヤホヤの馬場です。 私たちのチームではWebサイトやランディングページ、システム画面などのデザイン制作を主としていますが、バナーデザインのお仕事をする機会も多々あります。 デザイナーの皆さん、バナーを制作する際にこんな経験はありませんか？ クライアントからオリジナル素材（商品・イメージモデルの写真等）が提供されない。または、そもそも告知の性質上そのような素材が存在しない。 制約があって自由に写真が使えない。 イメージに合った良い感じの写真が見つからない。 私は入社1年目の頃から様々なバナーを制作してきましたが、写真の面で悩むことは多くありました。 限られた空間の小さい広告だからこそ、写真がない場合ど

メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。

バナー広告やスライドの見栄えがしっくりこなかったり、テキストが読みにくいと感じたことはありませんか？もしかするとその問題、「配色」を見直すだけで解決できるかもしれません。 まず下のバナー広告をご覧ください。 黒、青、ピンクの３色が使われていますが、読みづらく毒々しい印象です。 このバナー広告のデザインは一切変えずに、色のみを変更してみましょう。 いかがでしょうか。デザインはそのままでも、配色を見直すだけで印象を大幅に変えることができました。 本記事の目的は誰でも適切な配色ができるようにすることです。美術やデザインに明るくない方でも、ルールやコツを身につけることで上手に色が扱えるようになります。基本知識の解説に始まり、バナー広告の配色NG例から便利なツールまでご紹介します。 バナー広告のデザインについて学びたい方はこちらの記事もオススメです。 【事例付き】バナー広告のデザインがイケてないとき

「ランディングページ最適化」やLPOというキーワードは知っているけど ・ランディングページ最適化（LPO）についてよく分からない ・本当に売上が上がるのか分からない ・自社で本当にする必要があるのか分からない と思っていませんか？ CVを逃さないLPOチェックリスト16選 ネットで調べてみてもランディングページ最適化（LPO）による効果や、どの企業に向いていているのかまでは紹介されていないのではないでしょうか。 そこで、今回はランディングページ最適化とは何かを説明した後、実際に効果があった手法を厳選し、その事例をご紹介致します。 参考：ランディングページ（LP）とは？10分でわかるLPの目的・メリット・作り方 １、ランディングページ最適化（LPO）とはLPO（Landing Page Optimization）とは、ユーザーが検索エンジンなどから最初に訪れるページ（ランディングページ）を改

アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。 各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。 CSSUI MITライセンスで、商用プロジェクトでも無料で利用できます。 ピュアCSSで実装されたコンポーネント: JavaScriptを読み込む必要がないため、コンポーネントの待機時間はありません。 カスタマイズが簡単: スタイルの追加は簡単です。デフォルトのCSS変数をオーバーライドするか、クラスを使用してコンポーネントをカスタマイズできます。 スタンダードなHTML: 各コンポーネントは、モダンなHTML要素で構築されています。 ビギナーでもプロでも簡単: 簡単なプロトタイプから実稼働のW

CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレイヤー化（階層化）でき、これまでのCSSの実装方法が大きく変わるものです。 Chromeのデベロッパーによるカスケードレイヤーの基礎知識を紹介します。 Cascade layers are coming to your browser by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに準じて翻訳しています。 はじめに CSSの詳細度とカスケード @layerの動作 レイヤーの優先順位の管理 インポートファイルの整理 レイヤーとカスケード カスケードレイヤーの注意点 カスケードレイヤーの参考リソース はじめに カスケードレイヤー（@layerC

ChargeSPOTマン 空を飛ぶChargeSPOTマン ChargeSPOTスタンド ChargeSPOTを持っている交通誘導員 緑色のコーヒーカップ カセットテープ シルバーの指輪 シマエナガ シマエナガのぬいぐるみ コントローラー 手編みのベスト 編み物のかぎ針 ニット帽 おむつ（柄あり） おむつ 手紙 バクのぬいぐるみ 横向きのシマエナガ 日本刀 イカメシ 12345

JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。 テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。 Uisual -Free Landing Page Templates Uisual -GitHub UisualはプレーンなHTMLとCSSで実装された、ランディングページ用のテンプレートです。他のCSSフレームワークやJavaScriptなどは一切必要ありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。