私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android

欧文フォントは歴史と紐づけるとまじでわかりやすい 1,124 ありさん 2021年5月25日 18:54 ダウンロード copy #デザイン #フォント 1,124 3人がオススメしています この記事が気に入ったらサポートをしてみませんか？ 記事をサポート

私、Web業界に10年ぐらいいるので、色々と失敗事例を見てきました。1年ぐらい作っていたソーシャルゲームが開発中止になったり、受託していたプロジェクトの開発がうまくいかずに納品できなかったり、本番公開数日前に何もできていませんと制作会社に泣きつかれたこともあります。 まあいろんな原因でプロジェクトってうまくいかなかったりするんですけど、その中でも適切なお金を支払わないで失敗しちゃうのって、めっちゃもったいないなって思うわけです。私から見たら最初の見積もりの時点で「いやそんな金額でできるわけねーだろw」って金額で発注して、結果的に成果物がボロボロもしくは納品されないなんてことはざらにあるんですよね。で、結局作り直しを他の会社に依頼したら、全部で相場の3倍ぐらいお金かかっちゃいましたみたいな？うわーもったいない！って感じです。 Webサイトの値段って結構単純で、人が稼働した時間＋画像や映像素材

before, after といった疑似要素は単一の HTML タグに装飾を加える場合非常に便利。 ところが全てのタグに対して疑似要素が使えるわけではないので、例えば img タグに疑似要素を使おうとすると途端に思った描画がされず、驚いた人も少なくないかと。 本記事ではこれについてまとめておきます。 疑似要素が効かない HTML タグ まず HMTL5 のタグで疑似要素が効かないものは以下の通り brwbrcanvasembedobjectaudioiframeimgvideoinputtextareaselectlegendbuttondetailsfieldset 2021年8月17日加筆：button タグのコードに閉じタグが無かったため CodePen で正しい表記が出来ていませんでした。legend, button, details, fieldset には疑似要素が有効です。

米コンピュータ緊急事態対策チーム（US-CERT: United States Computer Emergency Readiness Team）は5月13日(米国時間)、「WordPress Releases Security Update｜CISA」において、WordPressに脆弱性が存在すると伝えた。この脆弱性を悪用されると、攻撃者によって影響を受けたシステムの制御権が乗っ取られる危険性があるとされている。 脆弱性に関する情報は次のページにまとまっている。 News – WordPress 5.7.2 Security Release – WordPress.org 脆弱性が存在するとされるプロダクトおよびバージョンは次のとおり。 WordPress 3.7から5.7.1までのバージョン 脆弱性が修正されたプロダクトおよびバージョンは次のとおり。 WordPress 5.7.2

制作業はコストでしかないWeb サイトを作るのは楽しいですし、たまたま作れる人が少なかったことから web デザイナーのキャリアをスタートしたのが 20 年ほど前。同じように作ることの楽しさからキャリアを始め、作れるスキルを『商材』として頑張っている方はいると思います。 World Wide Web に関わるデザインは今でも好きですし、個人で嗜む程度ですがコーディングも楽しかったりします。作ることの楽しさはとても共感できますが、残念ながら『作れる』だけだと価格競争に巻き込まれる恐れがあります。 Web に詳しい方であれば、web サイトひとつ作るにしても多大な知識とスキルが必要なのは分かります。ノーコードで表現力の高い web サイトが作れるとはいえ、ノーコードだからノースキルで済むわけではありません。時間と労力が必要なのは同業者であれば分かることですが、クライアントや事業主の視点だと少し

こんにちは、デザイナーの花ちゃんです！ 最近イラストのご依頼をいただくことが増えています。描くのは楽しい反面、時間がかかってしまうこともしばしば……。 そんなときの時短テクニックとしておすすめしたいのが、「ロイヤリティフリーのイラスト素材」です。自分のイラストと組み合わせることもできますし、構図や配色の参考としても役立ちます。 この記事では、無料で使えて、商用利用もできるフリーイラスト素材サイトをカテゴリーやテイスト別にまとめています。イラストは作者によって絵柄や表現の仕方に個性が出やすく、イメージに合ったものを見つけるのが難しいですよね。日頃からさまざまなテイストのイラストをストックして、引き出しを増やしておくことが大切です。ぜひイラストを探すときの参考にしてみてください！ イラストも作れるWebデザイナーを目指すなら…… イラストの制作のテクニックや基礎的なデザインスキルを一から学びた

みなさんこんにちは！ Webデザイナーのえびちゃんです。 バナーデザインを作成していると「レイアウトが上手くいかない」「バナーの参考を上手く探せない、ギャラリーサイトも古いのばかり」「最近のトレンドってどんな感じなんだろう？」……などなど、デザインの悩みってたくさん出てきますよね。 そこで今回は、そんなあなたに現役デザイナーがおすすめするバナーデザインの参考サイトをジャンル別に分類して紹介します！ 後半では実際に効果の高かった広告バナーのデザインも紹介しているので、ぜひ参考にしてください。 「ググってわからないこと」が一瞬で解決するかも？ Webの知識を効率的に学びたい、未経験からWeb業界への転職・就職を目指している、誰かに教えてもらいたい……という方へ。LIGが運営のWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」では実践的なカリキュラムで最短6ヶ月でWe

CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。 2023年2月14日にFirefox 110にサポートされ、CSSのコンテナクエリはこれですべてのブラウザで利用できるようになりました。コンテナクエリの基礎知識と便利な使い方を紹介します。 Say Hello To CSS Container Queries by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSコンテナクエリの背景 CSSメディアクエリの問題点 CSSコンテナクエリはどのように役立つのか？ CSSコンテナクエリの基礎知識 CSSコンテナクエリの使用例 CSSコンテナクエリのデバッグ方法 まとめ

[レベル: 中級] 検索ユーザーのユーザー体験を向上させるための画像の最適化をコツを Google の John Mueller（ジョン・ミューラー）が Twitter の一連の投稿で共有しました。 PSA: If you change your image URLs, and you care about Image Search, remember to redirect them. While tweaking my site, I noticed PSI suggesting to change some of my image formats, and realized it's worth mentioning this again. pic.twitter.com/gDHAqJB6eC — 🍌 John 🍌 (@JohnMu) May 1, 2021 この記事では、それら

3年で検索流入が50倍に。MAU1,000万人に成長した「LIPS」が語る、Googleボットさんへの「おもてなし思想」と、アプリとWEBでは目的が違うため「最適なUI」が変わる話 700万ダウンロードのコスメアプリ「LIPS」さんにお話を伺いました。 ※ 株式会社AppBrew 木全 佳梨さん、堀江 慧さん、阿部 栞さん「LIPS」について教えてください。木全： コスメのクチコミアプリです。アプリは700万ダウンロード、全体のMAUは約1,000万人、クチコミ数は累計180万件を超えています。 LIPSでは性別年齢を問わず「なりたい自分」を追いかける人のために、心地よい体験をしてもらえる場所を提供しています。 ここ数年だとLIPSは「WEB版」が伸びているそうですね。阿部： WEB版は、地道なコンテンツの改善が、Googleアップデートで評価されて、自然検索からの流入が3年間で50倍に成

CSS に、コンテナクエリという機能があるらしい。 メディアクエリでは画面全体の大きさに応じて要素のスタイルを変えることができたけど、コンテナクエリを使うと当該要素の親の大きさに応じてスタイルを変えられる。 /* メディアクエリの例 */ /* 画面幅が 400px 以下だったら、div を赤くする */ @media screen and (max-width: 400px) { div { background-color: red; } } /* コンテナクエリの例 */ /* div の親要素の幅が 400px 以下だったら、div を赤くする */ @container (max-width: 400px) { div { background-color: red; } } その機能が Google Chrome Canary で使えるようにされたと聞いたので、使ってみた。 こ

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳

LIGブログ編集部です。SEO記事を書くためのはじめのステップとして必要な「キーワード選定」。なんとな～く選んでいたりしませんか？ 言い回しひとつやキーワードの組み合わせでまったく検索結果が違ってきたりと、このキーワード選定は、コンテンツSEOの要といっても過言ではありません！ 思うような結果が出ないという方も、もしかしたらキーワード選定の方法から間違っているのかも？ この記事では、キーワード選定の具体的な手順や、おすすめのツールの使い方をご紹介いたします。キーワード選定の肝要を理解し、実際にツールを使ってキーワード選定、整理、優先順位をつけられるようになりましょう！ 【重要】キーワード選定の事前準備 キーワード選定の具体的な手順に入るその前に。知っておいてほしい前提知識や事前準備についてご紹介します。 確実に上位を獲得するために 前提として、確実に上位を獲得するためには、1つのキーワード

先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました！ 1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb制作でFlexboxを使用する時に大活躍すること間違いなしです。

WordPressサイトの画像を軽量なAVIFに変換できるプラグイン「ShortPixel Image Optimizer」 2024.04.26

こんにちは、Webディレクターのともぞうです。 今回はアプリケーション、PCで設定しておくと便利な設定まとめと、ショートカットの紹介です。 何度かこういう記事を書いていますが、今回はかなり細かい部分の話のまとめです。 前提 本稿で紹介するPCのセッティングやショートカットはmac OS基準になっています。 アプリケーション固有のものはWindowsユーザーの方でも同じだと思いますが、その点ご了承ください。 設定編 Googleカレンダーの権限設定 まず設定画面に移動します。 その後、予定の設定セクションへ移動します。 デフォルトのゲストの権限の値を予定を変更するに移動します。 こうすると相手都合で日付の調整があった際に、相手側からカレンダーの日付変更をおこなえるようになります。 無駄に「この日に変更お願いします！」と依頼をする必要がなくなりますし、カレンダーの説明も編集できるため追加情報を

画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー

今日はぼくの企業秘密的な話をします。 ぼくの文章はたまに「わかりやすいです」とか「気づけば最後まで読んじゃいました」などと言ってもらえるのですが、自己分析では、そこまで文章がうまいとは思っていません。 じゃあ何が違うのかというと、「パワーワード」というものを巧みに使えているからなんじゃないかと思っています。タイトルはもちろん、見出しや文章の随所に「パワーワード」を入れることで、読み手を惹きつけることができているのではないか。 パワーワードという言葉はどうやら「意味がわからないけど強い言葉」という意味で使われていたこともあるそうですが、ここでは単に「人を惹きつける力のある言葉」という意味で使います。 パワーワードは「香辛料」パワーワードは香辛料に似ています。 チーズとソースだけのプレーンなピザは、ずっと食べていると飽きてしまいます。でも途中でタバスコをかけると飽きずに食べられますよね？　素う

個人でも商用でも完全に無料、クレジット表記の必要もなし、変更や編集も可の太っ腹ライセンスのイラスト素材を紹介します。 イラストはすべて手描きで、スタートアップ、ハンドなどの定番ものから、在宅勤務やCOVID-19、ファッション、スポーツ、フラワーなどのテーマが揃っています。