Webディレクターのスキルツリー - 二宮日記
Webディレクター解体アドベントカレンダー初日の記事です。今日はWebディレクターという職種を定義するために作ったRPG風のスキルツリーとその活用方法を紹介します。あとは関連する他の開発メンバーとお互いの担当範囲を明確にする方法や、スキルツリーをスキルアップに役立てる方法について書きます。 曖昧な仕事 Webディレクターという職種に期待される仕事の内容は、開発に関わる他の職種と比べても非常に曖昧です。そもそも何ですか、ディレクションって。英語を直訳すると方向とか指示とかそういう意味ですけど、概念的でふわっとしています。 ディレクションという仕事に含まれる範囲も様々です。受託でホームページ制作を請け負って進行管理をメインに行うWebディレクターもいれば、既存自社サービスの売上増に責任を負う人も、新サービスの立ち上げに挑戦する人もいて、同じディレクターという名前でもやっている仕事が全然違います
これはすごい！ メディアクエリなしでレスポンシブを実装するCSSトリック5選
メディアクエリーのようにビューポートではなく、コンテナの幅に応じてレイアウトを柔軟に調整するテクニックを紹介。calc関数を上手に活用した、マニアックなCSSトリックたちです。 はじめに、タイトルとは裏腹にこの記事は、メディアクエリ不要論を唱えたり、メディアクエリを批判したりするものではないことを伝えておきます。メディアクエリはとても使い勝手が良いので、私はいつもいろいろなことに使っています。とはいえ、メディアクエリでレスポンシブWebデザインにおける課題すべてを解決できるわけではありません。 要素の配置はビューポートではなくコンテナの寸法に基づいて変更するのが望ましい場合がよくあります。この課題を解決するためにエレメントクエリのコンセプトが誕生しました。とはいえエレメントクエリは実際まだ納得のいくものになっていないので、Mat Marquisはこのコンセプトにおける課題を示し、改良してc
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
Really Simple CSV Importerで繰り返しフィールドにデータをインポートする方法 | VIVA!TANACIO
ホームWordPressReally Simple CSV ImporterでWordPressのカスタムフィールド（Smart Custom Fields）の繰り返しフィールドにデータをインポートする方法 Really Simple CSV ImporterでWordPressのカスタムフィールド（Smart Custom Fields）の繰り返しフィールドにデータをインポートする方法 2022 2/25 カスタムフィールドのプラグインは Smart Custom Fields を使っています。 CSVをインポートするプラグインは Really Simple CSV Importer を使いました。 Smart Custom Fields は、繰り返しフィールドが使えるので大変重宝しているプラグインです。今回、カスタムフィールドの繰り返しフィールドをCSVで一括登録したく、インポートする
スクロールした時に面白いエフェクトを出すためのアイデアまとめ
作成：2016/09/12 Web制作 > スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。 製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。 エンジニア速報は Twitter の@commteで配信しています。 インジケーター 進捗を示すインジケーターをヘッダー・サイド・フッター部分に固定してあるものをピップアップ。 ヘッダー どれくらいスクロールされたのか進捗状況を線で表示するインジケーター。コンテンツの量をさり気なく知らせることができるのがよいですね。CSSのみで実装できます。 See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen. CSS only s
その文字、薄すぎない？ デザインにおける灰色の明度は何%が最適か
UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導
WordPressのおすすめ検索プラグイン7選
WordPressでカテゴリやタグ、カスタムフィールドを検索対象に追加したり、Ajaxによるリアルタイム検索機能を実装するなど、検索機能を強化できるおすすめの検索プラグインを紹介します。 1. カテゴリー、タグ、カスタムフィールドなどあら項目を検索できる「Search Everything」 Search Everythingはカテゴリー、タグ、カスタムフィールドなど、WordPressのあらゆる項目を検索できるプラグインです。 通常の検索対象のタイトル、本文に加えて、抜粋、カスタムフィールド、カテゴリー、タグ、カスタムタクソノミー、コメントなどの項目を検索することができます。 使い方2. 管理画面で画像を代替テキスト（alt）で検索することができるプラグイン「Enhanced Media Library」 Enhanced Media Libraryは管理画面で画像を代替テキスト（alt
Googleタグマネージャー（GTM）とは？アナリティクスとの連携方法や使い方を解説
Googleタグマネージャー（GTM）とは？アナリティクスとの連携方法や使い方を解説 これから“BtoBマーケティング”を本格的に行いたいという方向けに、マーケティングの戦略設計や各種施策のノウハウを網羅した資料です。 1. Googleタグマネージャー（GTM）でどんな問題が解決できる？ サイト担当の皆様、日々の業務でこんな問題はありませんか？ ・タグを貼る度に、別の部署や制作会社に依頼しなければならない ・ 一つのサイトに様々なツールのタグが混在してカオス ・ どこにどのタグが記述されているか、把握しきれない ・複数人でサイトの管理しているので、最新状況が把握しきれない タグマネージャーを導入することで、これらの問題が解決できます。 CTAの効果計測、広告配信設定、外部ツールとの連携、チャットポット設置の際など、サイト運用上でタグを使うシーンは数多くありますので、サイト運用にはタグマネ
制作会社の視点から見る、サービス制作会社まとめ | UXデザイン会社Standardのブログ
2014.12.10 / Business 制作会社の視点から見る、サービス制作会社まとめ Tomohiro Suzuki 自社のサービスの改善や、新規事業立ち上げの際にデザインの信頼できる会社を探そうとしたことはありませんか？ 記事の性質としてはデザイナーというよりも、クライアント様やデザイナーが足りないと感じて外部の会社を探そうと思っている人向けの記事になりますが、いざ探そうとなると意外と迷ってしまうことがあるかと思います。 そこで今回は、同業での視点からサービスの制作をメインに行っている信頼できる会社を紹介しようと思います。 （※今回は東京の会社に限定していますが、また別の機会にフリーランスや関西の会社なども含めアップデートした記事を公開できればと思います） きっかけ この記事を書くきっかけになった元は先週に公開されました、Goodpatchさんにお声がけ頂いてお話をしたPodpat
「UX設計の第一歩」というスライドを公開しました。 - 笑顔を創りたいWebディレクターの日常
Twitterではすでにつぶやきましたが、社内勉強会をやりまして、ワテクシは講師として前に立つというそういうあれでして。なんでしょうか。何でもよいのではないでしょうか。 というわけで、スライド貼り付けておきます。 UX設計の第一歩-インテリジェントネット社内勉強会 from インテリジェントネット株式会社 はい、また例によってふざけまくった感じですが、内容はいたって初歩的かと思います。はい。 そんで、こういうのつくるたびに思うわけですが、 まあ、これみたからってUX設計ができるようにはならんよねぇ そんなこと言うなよって言う話ですがｗ いや、でも割と本気で思ってるし、こういうことって作った本人こそ言わなきゃいけないよなと思うのですよ。 やっぱりぼくはセミナーとかで手法の話をする、手法の具体的なやり方の説明をするというのにどうにも懐疑的で、その手法を取り入れられるんだったらネットに転がってる
最近のWEBサービス/アプリ作ってみた記事まとめ - undefined
最近のものをまとめています。 ３２歳無職が３ヵ月でSNSサービスを作ってみた ３２歳無職が３ヵ月でSNSサービスを作ってみた - 無職の流儀 つくったもの FLGMAP FLGMAPは行った場所を記録するWebサービス どんなもの? 「ワンタッチで行った場所を記録できるサービスがあれば良いなぁ」と思った経験を思い出して開発に着手しました。 使用技術 サーバ さくらVPS ２Gプラン 1580円 CentOS 言語等 PHP、JavaScript、jQuery、MySQL(mroonga) メール Postfix フレームワーク 自作MVC アクセス数 約350UU PVが約2000PV(14/12/23) 性の悩みを解決する為のWebサービスをつくってみました 趣味でWebサービスをつくってみました - 今日学んだこと つくったもの Love Points どんなもの? 異性含めた友達達と
7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手
CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
株式会社LITALICO 新卒採用情報
その意志が世界を変える LITALICO 新卒採用 変えると決めた人だけが世界を変えていく。この意志とともに私が、変えよう。
Swing Sheep | 乗って揺らせるマスコット
居心地のよい空間のために 乗って、揺らして、イスにして。時には抱きしめてあげられる「Swing Sheep」 カラダは本物のひつじのようにフワフワ、各パーツは無垢材のやさしい質感。 「Swing Sheep」は単なる木馬ではなく、 そこにあるだけでゆったりとした心地よい空間を演出します。
SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ！！ - Qiita
SEO好きですか？私は嫌いです。そんな事に取り組むよりも仕組みやコンテンツの改善に取り組みたいです。今回はそんなSEO嫌いにお送りする、SEO対策集です。やってられないSEOは１日で終わらせてもっと生産的な仕事に集中しましょう！ まずは結論から 下記をテンプレートにしていただければ良いです。google検索表示もfacebook表示も上手くいきます。twittercardの表示だけは公式サイト（日本語）より申請がいるのでそれだけしておきましょう。 <title>Qiita - プログラマの技術情報共有サービス</title> <meta content="Qiita - XXX" name="title"> <meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の４０字は大事。" name="description"> <meta content='キーワ
ztokyo.net - このウェブサイトは販売用です！ - ztokyo リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Australian Retirement Trust | Award Winning Superannuation