CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
【Web制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています】｜今村だけがよくわかるブログ
【Web制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています】 どうもです。いきなりですが、私は毎年この年末から来年の3月末あたりまで、段階的に仕事周りが騒がしくなって来る時期だったりします。決算期の都合もあるんでしょうかねぇ。似たような状況の方も多いのではないかと思います。ほんと、最近依頼が多いです。 ところで、仕事の依頼があるって嬉しいことです。 普段あまり交流のなかった方から突然の依頼や、または、人づてで紹介を受けたりなど。紹介を受けるってことは「仕事ちゃんとしてくれるよ」ってのを認めてもらえた証拠だと思っています。本気でうれしいです。 と、ここで「依頼」についてちょっと掘り下げたいな～と思いました。本題に入る前に、少しだけ前置きにお付き合いくださいますと幸いです。 ・・・「依頼」っていろいろありますね。 「ハマる依頼」
WordPress 4.1から title 要素の作り方が変わるという話 | バシャログ。
映画『インターステラー』を主に TARS 目当てに観てきた kagata です。『キカイダーREBOOT』といい『her／世界でひとつの彼女』といい、今年はロボットや人工知能の出てくる映画が印象に残っています。年末公開の『ベイマックス』も期待。 さて、WordPress の次期バージョン4.1が今月リリースを目指して準備されています。そのバージョン4.1から、title 要素の自動生成という新しい機能が盛り込まれる予定です。バシャログ読者に多いであろうフロントエンド畑の方々や、WordPress テーマカスタマイズの初心者のみなさまにもかかわりがありそうということで、ちょっと調べてみました。 おさらい：これまでの WordPress での title 要素 これまで、WordPress での title 要素はテーマの header.php にテンプレート関数 wp_title() を使っ
たった3分で社内決裁取得！？あの孫正義を支えたプレゼン資料作成術とは | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
「プレゼンに苦手意識を持っている」というビジネスパーソンは少なくないでしょう。 「伝えたいことが、参加者にわかってもらえない……」 「本筋とは関係ないことで、上司につっこまれてしまう……」 「プレゼンをしている最中に、参加者がメールチェックをはじめてしまった……」 自分のプレゼンに対して、そんな反応があれば、採択率が下がってしまうのは必然です。何日もかけて準備したのになかなか採択されず、「プレゼン資料を作り直すために残業を繰り返す」といった悪循環に陥る可能性もあるでしょう。 そのうえ、ほとんどのビジネスパーソンは忙しく「効果的なプレゼンの方法」を会社や上司から教えてもらう機会が少ないと思います。 効果的なプレゼンテクニック知りたくないですか？ そこで今回は、オンライン動画学習プラットフォーム「Udemy」でプレゼンテクニックの講座を開いている、プレゼンテーションクリエイターの前田 鎌利さん
Googleアナリティクス基礎：パラメーターの設定や使い方＜完全版＞
パラメーターの記述方法 URLにパラメーターをつけるときには、ルールがあります。 ・先頭は?でつなぐ ・以降、パラメーターをいくつもつなぐときは& （?は2つあってはいけない） ・パラメーター自体に&や?が含まれるときは、エンコードしたものを後で置換 例えば、そもそも?が付いているURLに、パラメーターを付けたいときは以下のようにします。 NG //www.kagua.biz/?id=999?utm_source=Facebook&utm_medium=social OK //www.kagua.biz/?id=999&utm_source=Facebook&utm_medium=social また、?のあとにまた?や&が来てはいけません。ですから、別な文字に置き換えたり、エンコードしたりして運用でカバーします。 ＞＞Web便利ツール/URLエンコード・デコードフォーム/処理完了 – TA
UXデザイナー深津貴之が語る身も蓋もない組織論!? 「ユーザー目線のない会社からは逃げるしかない」「それでもそこでがんばりたいなら……」 | HRナビ by リクルート
PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス
仕事とは「不安」との戦い: どうコントロールしたらよいのか？ - グローバル経営の極北
仕事をさまたげる「不安」 私自身もそうなのだけれど、いろいろな人の仕事振りを見ていると、仕事が進まない理由は多くが「未知なことへの恐れや不安」であることに気づく。 どこから手をつければいいんだろう、うまく終わらせられるだろうか、怒られたくない、あの人と話したくない、などなど。こういう心理的障害をうまく自分の中でコントロールできるかは仕事の成果を決める要素だったりする。 一方で、不安をうまくさばく、というのは、口で言うのは簡単だけれど実はとても難しい。 「不安」とどうつきあうか？ TEDで有名になり、日本でもその著作が話題となった健康心理学者のケリー・マクゴニガルのこのインタビューは、その点について示唆を与えてくれる。 ここで彼女が述べていて面白いのは、不安というのは「先に存在していて」、「なぜか」というのは後付けである、ということ。つまり、脳というのはそもそも「不安感を持つというのが習性」
UXデザインを取り巻く7つの変化 デザイン会社 ビートラックス: ブログ
先日リリースした「UXデザイントレンドまとめ」では、UXデザインがどのように変革してきたかを紹介した。それを踏まえそのトレンドがより加速すると考えられる。 その大きな理由としては、ビジネスにおけるデザインの重要性の拡大、テクノロジー面との融合、そしてついにデザインの現場にAIの活用が実現し始めることが挙げられる。 では、具体的にどのような変化が訪れるか、7つのポイントで紹介する。 1. “UXデザイン”の概念が再定義されるユーザー体験 (UX) を設計 (Design) することを、UX Designと表現される。主にユーザーに商品やサービスを購入してもらい、使ってもらい、使い続けてもらうことを目的により良い体験をデザインすることがゴールとなるが、ユーザーへのタッチポイントの増加やモノよりもコトへのフォーカスのシフトにより、この”体験”と”デザイン”の幅がここ数年で格段に広がってきている。
ホームページ制作 費用・料金の相場一覧《ポイント解説付》【2023年改訂版】 - Web担当の味方
WEB制作（ホームページ制作）を制作会社やフリーランスに依頼するに際、 A社にホームページ制作の見積もりを依頼して見たら〇〇万円だったけど、コレは高いのか安いのか？ 費用感の目安がないとその費用の妥当性がわからず判断しにくいという方は非常に多く、制作における費用・料金相場はとても気になるところだと思います。 ウェブマーケティングやウェブコンサルティングをメイン事業している当社では、多くのウェブ制作会社様やフリーランスのクリエイター様と取引をさせていただいております。 本記事では、そんな当社がお付き合いさせていただいているウェブ制作会社やフリーランスクリエイターの費用感を踏まえたうえでの発注費用の大凡の相場感に対してお伝えしていこうと思います。 （もっと安い業者もありますが、品質的な問題も関わってくる可能性もあります。この辺りは別の記事をご参照いただけますと幸いです。） Webサイト制作費用
マンダラートとは？９つのマスで閃きが加速する一流のアイデア発想法
0 0 225 0 考えれば考えるほどアイデアが浮かばないとお困りですか？そんなときにマンダラートが役に立つということは知っていても、やり方がよく分からないとお感じではありませんか？ マンダラートはすでにあるキッカケから連想していくという人間の思考を利用して、自然に頭の中にあるものを書き出すことができるアイデア技法です。特に勉強することや用意するものがないので手軽に始められる上に、実際にやってみるとかなりの威力を発揮してくれます。 この記事では Web 制作や Web プロモーションなどで数多くの営業ツールやプレゼン資料の作成に関わってきた筆者が、これまでに実践してきたマンダラートの活用法を解説します。基本から実際にマンダラート図を作成する手順、そしてマンダラートを簡単に描けるスマホアプリやテンプレートもご紹介していますので、ぜひご一読ください。 出そうで出ないとお感じのアイデアが、きっと
Adobe XDをデザイン・プロトタイプ制作だけでなく様々な方法・場面で活用してみよう - ろくデブログ
この記事は Adobe XD Advent Calendar 2017 19日目の記事です。2017年10月19日にリリース版になった XD。その魅力について前の記事では “他のデ...
WordPressパーマリンク変更作業でやったこと（301リダイレクト方法あれこれ） – nekonomemo
以前から当ブログのカテゴリーを変更したいと思っていたのですが、ブログ開設時にパーマリンク（記事のURL）にカテゴリー名が含まれるようにしていたので、URLが変わってしまうのがイヤで躊躇しておりました。が、変えるならはやく変えたほうがいい！と、思いきってパーマリンクの設定を変えることにしたのですが、旧URLから新URLへの301リダイレクトにだいぶ手間取って大変だったので、やったことなどをメモします。 今回やりたいこと カテゴリーをあまりにもざっくり設定しているので、もう少しわかりやすい分類に変えたい！ 問題点 ただ、当ブログではWordPressのパーマリンクにカテゴリー名が入るようにしてしまっていたので、カテゴリーを変えると各記事のURLまで変わってしまいます。そうすると、ちょっと困ることがでてきます。 リンクしていただいている場合にリンク切れが起こる せっかくいただいたはてなブックマー
【DL可！】Webサイトの要件定義書テンプレートで制作・依頼をしよう。 | 発注者向けノウハウ
有名Web制作会社で働くWebディレクターが、10年間に培ったノウハウを公開！ Webサイト制作・依頼をする際に使える、要件シートをまとめました。これさえあれば、Webサイト制作の効率化、間違いなし。外部パートナーに依頼する際も、このテンプレートを使って要件定義書をまとめておけば、スムーズなやり取りが実現します。 要件シートは、エクセルでダウンロード可能。効率的なWebサイト制作にお役立てください。 Webサイト制作・依頼をスムーズにする要件定義のテンプレート 要件定義とは、Webサイトの仕様を決めることです。 「よく分からないけど、とりあえずWebサイトを作ってくれ」。こんな依頼も少なくありませんが、Webサイトというのは、ブログを更新するように簡単に作れるものではありません。 Webサイトを作るためには、機能や性能、制作体制やスケジュールなどの具体的な要件が必要です。 ところが発注側と
要件定義書の制作時に役に立つ！ 要件定義書の項目一覧
要件定義工程の成果物として作成されるのが、要件定義書です。しかし、システム構築向けの要件定義書のリストはあっても、なかなかWeb制作向けのものが見つかりにくくて困った経験はありませんか？ この記事では、Web制作向けの要件定義書に含める書類の項目についてまとめています。プロジェクトやサイトの規模などによって適宜調整して是非活用してみてください。 要件定義書のリスト １. Webシステム・Webサイト制作の概要・方針決定 １-１. Webシステム・Webサイト制作の背景 １-２. Webシステム・Webサイト制作の目的 １-３. Webシステム・Webサイト制作の目標 １-４. 作業範囲 １-５. 納品物・納品場所・受け渡しについて ２. 業務要件一覧 ２-１. （あれば）現行のWebシステム・Webサイトの分析 ２-２. 競合他社の調査・分析 ２-３. Webシステム・Webサイト化する範
オリジナルな404（Not Found）ページの正しい作り方
404ページが出るのはこんなとき 削除されたページにアクセスしたとき 間違ったURLを入力したとき 制作段階で何も設定をしていないとき、多くの場合は冒頭の画像のように「エラーが出た」ということしか伝わらないシンプルな画面表示になります。これはユーザが本来見たかったページにたどり着けないまま、諦めて離脱してしまう可能性がとても高い状態です…。 そこで有効になるのがオリジナルな404ページの作成です。 今回は、404ページの作成のポイントや設定方法を見ていきましょう！ オリジナルの404ページを作ってみよう オリジナル404ページ作成に必要なのは、大まかに下記の2ステップです。 404ページを作成 HTTPステータスコードが404のときに作成したページを表示させるよう設定 まずは404ページを静的な1枚のページとして作成するところから始まります。 ちなみに当サイトの404ページはこんな感じ。こ
サービスデザインで考慮しておきたいUXチェックシート35問 - DeNA Design
こんにちは。DeNAデザイン戦略部 デザイナーの宮本です。 今回はサービスデザインをする上で考慮しておくべきUXについて考えたいと思います。 「既存サービスのリプレイス」「新規サービスの立ち上げ」どちらにせよプロジェクト初期段階で考慮する点が重なっていることが多いのですが、毎回白紙の状態から進めてしまうと必ず考慮漏れが起きることから、これを予防するために実際の現場でのノウハウ（失敗）を元に問いかけ形式のチェックシートを作ったので公開したいと思います。 なお、今回のチェックシートはモバイル向けアプリの改修・立ち上げ時を想定した初・中級者向けで、あくまで個人的観点から重要だと思うところを中心に列挙しておりますので、参考程度に捉えていただけると幸いです🙇 戦略・施策設計においてはターゲットユーザーの鮮明化と、本当にそのサービスが使ってもらえるのか？を重点的に言語化できるようにしています。 また
Adobe XDがどんどん便利になってる！Web制作に使える無料素材のまとめ
先週のCreative Cloudアップデートで、Adobe XDが正式版としてリリースされました。Adobeユーザーはもちろん、Windowsがメイン環境の人にもUI/UXデザインの本命と言えるでしょう。 昨日のAdobe Creative Cloud道場のライブ動画ではAdobe XDの近い将来の機能として、タブレット用のレイアウトを作成したら、人工知能Adobe Senseiでスマホ用の複数のレイアウト候補を自動作成し、あとはそこから選び出せるようになるとのことです。作業には時間をかけず、クリエイティブに時間をかけることができますね。 Adobe XDでWebサイトやスマホアプリを制作する際に役立つ、ユーザーフローやワイヤーフレーム、グリッド、スタイルガイド、UIコンポーネントなどの無料素材を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
anime.js
