いざという時に使える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

こんにちは、Webディレクターのイナッチです。 今回は、Adobe XD（以下：XD）で更新しやすいテーブルのひな形を作りましたので、ご紹介します。 せっかくなのでなぜ更新しやすいテーブルを作ろうと思ったのか？ なぜ作れたのか？ などの背景も合わせてご紹介いたします。が、そんなことはいいから早くテーブルを見たい方は、もろもろスキップしてこちらからどうぞ。 XDで更新しやすいテーブルができるまで XDといえばWebサイトなどの画面デザインのためのソフトというイメージですが、その使い勝手の良さから、デザイン以外の場面でも活用する機会が増えてきました。たとえばLIGのアカウントプランナーのノブさんは、企画書（提案書）をXDで作られるそうです。

あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト

突然ですが、ここに一つのプロダクトがあるとします。 そのプロダクトを見つめる視線には様々な種類があります。 そのプロダクトを利用しているユーザーの視点、利用していないが存在は知っているという人の視点、それをつくるデザイナーの視点、プロダクトを運営している会社経営者の視点… もしあなたがデザイナーであれば、デザイナーの視点だけが唯一自分で体感できる「主観」で、それ以外はすべて「客観」となります。 主観と客観のスイッチング プロダクトデザイナーはユーザーの期待通りに正しく動くしくみを設計し、「このプロダクトを利用した時に、ユーザーの生活はどう変化していくのだろうか？」と問いを立てながらアウトプットを評価していきます。 自らの考える理想像をデザインしながら、一方でそれに触れるユーザーの様子を想像する…プロダクトデザイナーは主観と客観を電気のスイッチのように瞬時に切り替えることに長けた人が多いイメ

デザイン会社の経営者として、これまで数多くのデザイナーと接してきた。その中で、どのようなデザイナーが活躍するのか、成長するのか、そして成功できるかのパターンが分かってきた。 デザイナーの価値を左右するのは非デザインスキルだ！実は、重要なのは、”デザイン能力” だけではない。むしろ、デザイナーが成功するには、デザイン能力と同じぐらい、もしかしたらそれ以上に大切なスキルがある。 逆にデザイン力がめっちゃ高いのに、非常に残念な状態にハマっているデザイナーも見てきた。それらを踏まえ、デザイナーに求められる8つの非デザインスキルを紹介する。 なぜ日本ではデザイナーの地位が上がらないのか？~海外デザイナーとの比較~ デザイナーとして成功するために必要なデザイン以外の8つのスキルでは、どのようなスキルがデザイナーにとって重要になってくるのか。これまでの経験とこれからの時代の変化を考えると、下記の8つのス

デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基本の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。

この記事では、Webデザイン制作を効率アップさせる最新オンラインツール33個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これらのツールをうまく活用することで、面倒な作業も短時間で行い、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しましょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. アイコンツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ We

ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。 CSSで実装できる小技テクニック目次 1. テキストグラデーション 2. 左線グラデーション付きの見出しタイトル 3. アニメーション付ボーダーライン 4. テキストリンクがすーっと通過するホバーエフェクト 5. リンク用CSSラインホバーアニメーション 6. SVGで画像の周りをデコレーション 7. 文字テキストを回転させる方法 8. 長い文章を

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2020年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2020 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されているとは思えない、シンプルながら効果的なテクニックが多数ランクインしていた2020年。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 94位 Animated clip-path slider Concept 画面を縦半分に二分割した画像スライダーで、画像にマウスホバ

これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse

【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新 こんにちはデザイナー社長の船越です！久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から 「どこから画像を引っ張ってくればいいかわからない😭」 「日々の情報収集どうすればいいの？🤔」 という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました！デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです！たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ！」というのがあればぜひコメントで教えてください！ 日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し

ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、

この記事では、Webデザインやグラフィックデザインの制作スピード、生産性がアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用すれば、面倒な作業をラクにこなし、作業の効率化をアップできるでしょう。「なぜ今まで使っていなかったのか」、そんな気持ちにさせる便利ツールが揃いました。 各ツールはカテゴリごとに整理しています、以下のリストを参考にどうぞ。 コンテンツ目次 1. Web制作便利ツール 2. イラスト系ライブラリ 3. 配色ツール 4. デザインコレクション 5. プロトタイプツール 6. コラボレーションツール 7. 面白、クリエイティブツール Web制作フローが変わる！便利な最新オンラインツールまとめ Web制作便利ツール BrowserFrame 各種ブラウザ付きでスクリーンショットを撮影できるオンラインツール。目的の

以前Twitterで投稿した内容を少し深掘りし、バナーがどれほどの経済効果を生んでいるのかを解説したいと思う。 ご注意 : 登場する数値は「実数値ではなく編集した目安」の数値です。弊社顧客の数値とは関係ありません。 はじめにTwitterではクリック率とCV数(購入数)を書きましたが、そこから掘り下げて広告に対しての費用対効果まで考えてみます。 ・数は獲れるが赤字になる ・効率は良いが数が足りない この２点は「目標数値からの逆算」をしながらバランスをとるしかありません。１ヶ月間の目標のために週の目標とタスクを決め、最適解を探し、その積み重ねが事業の年間目標の達成に繋がると考えています。 どんなバナー作った？１　化粧品を持っているだけの「手に持っただけバナー」 トリミングしただけなので作業時間は5分ほど ２　綺麗なイメージカットや価格/コピーも入れた「バナーっぽいバナー」 構図と配置バランス

温厚な僕ですが、高校生の頃はかなりのツッパリで、牛丼にかける醤油の量であらゆる人にマウントをとっていた時期がありました。 もちろん無敗です。 「最強」という称号と引き換えに腎臓にダメージを追いましたが無敗です。 とまあ武勇伝はさておき、どうも、サプライズ栄作です。 今回のnoteはAfter Effectsを今から学ぼうとする方や、初めたけどまだわからないといった方向けの内容です。 タイトルにもあるように初学者向けにアフターエフェクッの再生リストを作ってみました。 After Effectsでの映像の作り方は、先人の方々が時間を割いてチュートリアル動画をアップしてくださっています。感謝しかありません。 そして、ここだけの話、なんと無料で見れます！ とはいえ、色んな人のチュートリアルがあります。 「なにから学べば良いのか？」「この方法であっているのか？」など 色々な疑問もでてきます。 また多

2019年は、サブスク型、マッチング、AI関連のサービスが流行した一年になった。 また、時代背景から、副業・フリーランス向けのサービスも普及。 食・旅行・趣味など、様々な面で”無駄をなくす”サービスが多いことも特徴的だった。 今回まとめた、2019年話題のサービスは11項目・総勢50選。 フリーランス向け サブスク型 マッチング 仕事効率化 稼げる副業 ライフスタイル 「食」関連 趣味 旅行 女性向け 学生・学習者向け 開発者の想いがこもった普及すること間違いなしのサービスばかりだ。 50選という膨大な記事になってしまったため、ブックマークして暇な時に確認することを強くオススメする！ フリーランスを助ける便利なサービス3選 1. フリラテ フリラテは、これから副業・フリーランスなど「個人で仕事を始めたい」と思っている方のための支援サービス。 フリーランス一歩目を間違わないために、個人での仕

この記事では、Webデザインやグラフィックデザインの制作がグンと捗る、便利すぎる最新オンラインツールをまとめてご紹介します。 通常、時間のかかってしまう面倒な作業も、これらのツールやサービスをうまく活用することで、より快適にデザイン制作をすすめることができます。お気に入りのツールを自分のワークフローに取り入れ、自分だけの爆速制作スタイルを確立してみませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. デザインコレクション 3. モックアップツール 4. デザインからコードへの変換ツール 5. Web制作お役立ちツール 6. プロトタイプツール 7. アイコン素材パック 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Illustrations 商用利用もでき

こんにちは、株式会社アトラエでデザイナーをしています三上蒼太です。 この記事は、Atrae Advent Calendar 2019 の3日目です。 本記事では、Figmaでのデザインファイルの運用方法について書きます。 これが完成形という訳でもなく、まだ模索中の段階です。そしてチームのステージやメンバーの特性によって柔軟に変えていくものだと思っています。 運用方法に迷われている方の一つの参考事例となれば幸いです。 そもそもなぜ"運用"が大事？ サービスは、公開して終わりではありません。 運用し、機能を追加したりABテストするなどしながら設定した目標を達成すべくアップデートしていくことが前提です。 また、サービスの運用は短期的なものではありません。 数年、もしかしたら数十年のスパンの中で、いろんなステークホルダーが参画しては抜けてを繰り返しながら進んでいくはずのものです。 サービスデザイン

レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb