2022年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figmaなどの使いこなし術 フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2022年のもっとも大きなニュースは、IEのサポートが終了したことではないでしょうか。IEに苦しめられていたWeb制作者は非常に多いと思いま

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数

ロゴの配置で悩んでいる人に見てほしいんですが この考え方に気づいた時に一気に悩まなくなったやつがこれです https://t.co/Z8FAiuuqFu

Adobe Illustratorを使用して、コーポレートやブランド・サービスなどのロゴをデザインし、ビジュアルが決定してからクライアントに納品データとしてお渡しするまでの「ロゴデータを作成する工程」について、私が気をつけていることをまとめてみました。 この「ロゴデータを作成する工程」は気をつけなければならい細かい点が多く、作業に時間がかかります。見落としが発生しやすい作業でもあるため自分の備忘録も兼ねて。 ※ 私が試行錯誤しながら構築した作業工程なので、これが正解というわけではありませんし、後から変わるかもしれないので、あらかじめご注意ください。 📋 アートボードをチェックするアートボードはドキュメントの基盤となるもの。 わかりやすいアートボード名を付け、不要なアートボードは削除する。 1-1： アートボードの座標をチェックする 🆙アートボードの座標・サイズの数値に小数が入っていると

SEO（Search Engine Optimization）とは、直訳すると「検索エンジン最適化」。自分のWebサイトが「検索エンジンに評価されるためにはどうしたらいいのか」を考えるのであれば、検索エンジンについて学ぶことは非常に重要ですよね。 ここでは、検索エンジンの仕組みや歴史について解説していきます。 ▶ 検索エンジンの 仕組みとは ▶ 検索エンジンを欺くブラックハットSEO ▶ 検索エンジンが推奨するホワイトハットSEO（本記事） 検索エンジンが推奨するホワイトハットSEO前節では、Googleを欺くブラックハットSEOについて説明しました。一方で、ホワイトハットSEOはGoogleが“ユーザーの利便性”を考えて設計したガイドラインに則った手法であるため、ブラックハットSEOのように、Googleを欺くような施策ではありません。しかし、ブラックハットSEOの影響で、「SEO=悪」

デザインの引き出しを増やすためにも、トレンドを押さえておくことは大切です。 タイポグラフィ、カラー、形など、デザインの基本となる要素が詰まった、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 ロゴのトレンドの最新版は、こちら。 2021年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ 2019 Logo Trend Report 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 トレンドの流れを見るのも面白いと思うので、過去分も。 2018年のロゴデザインのトレンド 2017年のロゴデザインのトレンド 2016年のロゴデザインのトレンド 2015年のロゴデザインのトレンド 2014年のロゴデザインのトレンド 2013年のロゴデザインのトレンド 2012年のロゴデザインのト

現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例

だれウマ/『宇宙一ずぼら150円めし』即重版！ @muscle1046 「やばいプリン」 マグカップに砂糖大1、水小1を入れレンジで2分弱加熱して飴色になれば小1の水を加え混ぜる。←カラメル 卵1個に砂糖大2、牛乳120mlを加えてよく混ぜ、漉してマグカップに入れる。←プリン液 600wで約1分半加熱し後はホイルで包み粗熱取れたら冷蔵庫。 レンジでも絶対に失敗しない pic.twitter.com/IGVf5aooQk 2019-05-21 12:31:03 だれウマ/『宇宙一ずぼら150円めし』即重版！ @muscle1046 また、マグカップ以外では絶対に作らないでください。容器が割れる恐れがあるみたいです。 そしてマグカップでも割れる恐れがあります。 対処法としては、マグカップを予め温める、マグカップを、急激に冷やさない、そしてカラメル抜きでプリンを作ることです。 安全には充分気をつ

2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応

ホーム / お役立ち / 【LIVE2D + Photoshop + AfterEffects】イラスト・アニメ風加工した風景写真、LIVE2Dのキャラクターを合成して動画を作る

（2019.02.23に書いたブリコルールのブログ記事の引越しです） 写真をイラストっぽく使いたいなどの局面はいろいろありまして、備忘録も兼ねて。 会社の近所で撮影した写真をこんな感じでイラスト風にして、弊社のキャラクターと合わせてみました。まあまあアニメのワンシーンのようにも見えなくもない？？ 最近だと、アプリで簡単に写真をイラスト風に変換できるものもありますが、photoshopを使います。 ベースとなるレイヤーを作成・調整する もとの写真はこちらです。 なんの変哲もない、何年か前に撮ってフォルダの奥底で眠っていた写真ですが、空を抜きやすい写真を選ぶとよいです。 【イメージ】＞【色調補正】＞【HDRトーン…】を選択します。 他のサイトなどでもHDRトーンを使って紹介しているところは多いです。私もこれを使います。HDRトーンの正しい使い方は正直なところ自分はわかっていません…。調整がまと

当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。 パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの用語 CSSのパフォーマンス CSSの記述の順番 リソース はじめに この記事は私がこれまで一緒に働いたことのある人を批判するものではありません。個人的にCSSについて調べて、学んだことのリストです。 多くのデベロッパーがCSSについてあまり気にかけていないという事実は目新しいことではありません。ネット上や、友人・同僚と話すことでそのことに

と思っている話です。もはやタイトルでぜんぶ言ってしまった。 せっかくなのでもう少し続けます。 2020/05/03追記：第二弾？書きました この本がまだ初稿になる前、共著者のみなさんと執筆真っ最中の頃に何度か打ち合わせがあったのですが、そこで「書籍的な文章を書き慣れてない人って、"という"と"こと/もの"を多用しがちなので、この2つを抑えるだけでも文章がシュッとするんですよ」とお話したら思ったより反応があったので、これは需要があるんじゃないかと感じたのがきっかけです。 ここから先は具体例を交えて解説していきます。 さすがに他人様のテキストを使うのは気が引けるので自分が書いた記事を例に挙げます。……でも自分はこのテクニックを使うようにしているので、該当する記事がなかなかないんですよねぇ……と思ったらあった！ （よりによってこれか……せっかくなので皆さんスタァライトを観ましょう！） 記事中では

調べたところ良いまとめ記事が見つかりませんでしたので、よく聞くサービスを中心にフリラボでまとめました。もし、他にもこんな良いサービスあるよと要望があればTwitter又ははてぶコメントで教えてください！ （※必ず記載するとは限りません） カッシー フリーランス・クリエイター支援を2012年から始めましたが、この10年でかなりサービスは充実した印象です。実際に僕の身の回りで使われているサービスから気になるサービスまで一気にまとめました。ぜひご覧ください〜！ 注意）仕事紹介エージェント系は広告費の影響が大きいのと、実際どれだけ案件があるのか利用してみないと分からないことから、品質を担保できないためこの記事では主に紹介はしません。 【この記事を書いた人】 フリーランス・クリエイターの駆け込み寺 株式会社クリエイティブユニバース 樫本祐輝（カッシー@strive） 1985年生まれ 岡山出身大阪在

エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理

こんにちは、Webデザイナーのゆうこです。ふだんの業務でロゴ制作を担当させていただくことがよくあります。 ロゴ制作って楽しいですよね。自分が作ったロゴが会社やお店で使われているのを見ると、嬉しくてわくわくします。 今回はロゴ制作の過程と、デザイナー初心者の方でもすぐに使える、Illustratorでのロゴデザインの小ワザをいくつかご紹介したいと思います。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。デジLIGでは、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と、手厚すぎる就職支援が特徴！ぜひ一度詳細をチェックしてみてください 👉「デジタルハリウッドSTUDIO by LIG」詳細へ 👉スクールの概要が詳しく分かる資料のご請求はこちら！ 💡ロゴ制作会社お

光や炎、虹などをリアルに表現できる、ライティングエフェクトに特化したPhotoshopチュートリアルをまとめてご紹介します。 当サイトで2010年ごろより毎月まとめているPhotoshopチュートリアルを参考に、直近5年の間に公開されたデザイン手法をまとめて確認できます。 さまざまな光やライティングを自由に操るテクニックが中心で、とにかくPhotoshopすごい！と思わせるチュートリアルが揃い、どれも手順ごとに写真付きの詳しい解説付き。Photoshopの基本を覚えながら、より実践的なデザインテクニックを習得してみましょう。 Photoshopで光を極めよう！ライティングエフェクトの参考にしたいチュートリアル、作り方65個まとめ 深海の美しい景色をデザインする方法 フィルタ機能や調整レイヤー、スマートオブジェクトなどを利用して作成する、これぞPhotoshopな合成テクニック。 幻想的なラ

フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。 RFS(Responsive Font Size) -GitHub RFS(Responsive Font Size)の特徴 RFS(Responsive Font Size)のデモ RFS(Responsive Font Size)の使い方 RFS(Responsive Font Size)の特徴 RFSは、ブラウザのビューポートのサイズに基づいて、フォントに適切なサイズを自動的に計算して適用するスタイルシートです。 フォントのサイズは、スクリーンやデバイスごとに最適化されます。 フォントのサイズには下限と上限があ

サッポロホールディングス(株)のグループ企業であるサッポロビール（株）は、TVアニメ「ゴールデンカムイ」とタイアップしたサッポロ クラシック「ゴールデンカムイ缶」を7月18日に北海道で数量限定発売し、さらに「サッポロ クラシック ゴールデンセットプレゼントキャンペーン」を実施します。 TVアニメ「ゴールデンカムイ」は、明治時代後期の北海道を舞台とした週刊ヤングジャンプ（集英社）で連載中の人気マンガ「ゴールデンカムイ」を原作とし、2018年4月よりTVアニメ化され、放送中です。 1876年に北海道に設立された「開拓使麦酒醸造所」を前身とする当社がタイアップすることで、北海道を応援することを目的として発売する商品です。 デザインには、主要キャラクター杉元のオリジナル描きおろしイラストを使用。同デザインを含む限定デザインビールグラス2個とサッポロ クラシック350ml× 6缶パック1個（通常デザ

ポートフォリオとは何か？　デザイナーが自分を売り込むために作る作品集のようなものであり、就職活動には欠かせない存在です。どういうデザインにすれば面接官にウケるのか、適量の作品数はどれくらいなのか、表紙は？　プロの現役デザイナーに聞いてきました！ こんにちは、株式会社バーグハンバーグバーグでデザインのアルバイトをしている、お高菜と申します。普段は美術系の大学でデザインを学んでいます。 来年には大学を卒業するので、そろそろ就活の準備をしようかなと思っているのですが……皆さん、こういったものをご存知でしょうか？ こちらは「ポートフォリオ」と呼ばれる作品集。 デザイナーが自分の作品をファイルし、就職先に「私はこういう作品を作っていました」「こんなこともできます」とアピールするための作品集です。 デザイン系の職種の場合、企業はこのポートフォリオを見て学生の力量を判断します。つまり、ポートフォリオの出