UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ - コムテブログ
TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。 IA（情報アーキテクチャ） １．基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA（情報アーキテクチャ）研修の講師をしてみた。：そのフォローアップ | future-proof
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
Web制作にGPU処理を取り入れる
Updated 2013.10.24 / Published 2013.10.24 HexGLのようなWebGLのコンテンツを見ていると、これから本格的にWebがゲーム機の領域を浸食するようになっていくのかと、同じWebでもWebサイトを作る領域からすると動きの面で感心させられることしきりです。 なぜWebGLのアニメーションは滑らかなのか さておき、WebGLのコンテンツは非常に滑らかなアニメーションを実現できているわけですが、それはWebGLがCPUではなくGPUで処理されいるからとのことです。この場合のGPUで処理をするというのはソフトウェアであるブラウザがGPUを使ったハードウェア・アクセラレーションに対応していることが条件になります。つまり、CPU上でソフトウェア（ブラウザ）が処理する部分とGPU上のハードウェアで処理する部分を切り分けられる機能をもっているということになります。
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
ウェブサービスの管理画面を作る上で守るべき6つのルール | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！！ メディア事業部のまさしです。 昨今、ウェブサイトをはじめとするウェブサービスやアプリなどは、作っておしまいではなく、作ってから運用し改修を続けて成長させていくことを前提とするようになりました。 その際に重要な役割となる管理画面ですが、管理画面って作るときに何のデータを出していいのか、どうデザインしたらいいのか迷いますよね。結果、あらゆる機能とあらゆるデータを盛り込んだ管理画面になってしまいがちです。 今回は、そんな悩みを解消できるように、目的に合っている使い勝手の良い管理画面をつくるための6つのルールをご紹介いたします。 ウェブサービスの管理画面をつくる上で守るべき6つのルール ルール1：ターゲットは1つに絞るべし！ 最も効果的な管理画面とは、単一のユーザーをターゲットとして、その目的をもとに固有のデータを表示しているものです。 複数のユーザーをターゲットとしてしまうと、い
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
WEB業界で定年まで今みたいに稼いでいられるのか ? 人生相談に答えてみました。
将来定年まで今のまま行けるかなんて、別にどの業界でも起こり得ることですよ。 フィルムで儲けてたのにデジカメの時代になりフィルムが売れ無くなり、デジカメに賭けたらスマホの登場でコンデジが売れ無くなり、それでもいつのまにか化粧品を売ってかつての1.5倍の売上を出してる企業もあるんです。ほとんどどこのことだか丸わかりですが（笑） 重要なのは、転機となるときにきちんと経営資源を振り分け直せることですよ。企業なら経営資源だし、個人なら身の振り方、キャリアプランや技術の選択、になると思います。 インターネットの世界は変化が早いので、全く同じ技術でこの先戦えることは100%ないと思いますが、だからといってその技術が今の技術の延長線上にない可能性もまた低いと思います。 不安だと悩むことで、未来の収益が約束されるのならば、私も沢山悩むのですが、40年生きてきて悩むことで未来・将来が好転したことは1回もありま
2013年に話題になったデザインに関する「考え方」が変わる記事14選
デザインをしつづけていると、たまに柔軟に考えられなかったり、自分のデザインに対して疑問を感じるときがありませんか？ そういうときは一度、初心にかえってデザインに関して考え方を見直したり、インスピレーションを刺激することも大切です。 また、デザイン思考を身につけるためにも、常日頃から考え続けることも重要です。 今回は、過去に話題になり、読むだけでデザインに関する「考え方」が深まる14個の記事をご紹介します。 デザインに対する考え方が変わる・深まる記事 これはウェブページです｡ ウェブデザインの本質は､言葉です｡ ウェブで一番強力な道具は､今も昔も言葉だということを、思い出させてもらいました。 ▷これはウェブページです｡ 選ばれるウェブデザインとは ９つの基本的なルールと感情に訴えるデザインについて詳しく書かれています。 サイトの使いやすさだけでなく「ユーザーがそのサイトにどんな感情を抱くか」
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
「Web制作者」ってHTML屋じゃないと思うんだよね
神戸ITフェスティバル2013にてconcrete5のご紹介をしてきました。5つのCMSの開発者やユーザーが順番にそれぞれのCMSを紹介し、最後に座談会をするという珍しいイベントでした。CMSを選定したいと思っている意欲の高い方が参加されていましたので、concrete5について色々特徴や他のCMSに比べて良いと思っているところなどを詳しくお話ししました。 このイベントのなかで他のCMSのプレゼンもずっと聞いていたのですが、SOY CMSの古荘さんがおっしゃったひと言がすごく印象に残りました。 コンテンツ = 企業の価値 #kif2013 — Takuro Hishikawa (@HissyNC) December 13, 2013 ホームページをリニューアルしたら社長ブログを作りましょう、毎日更新しましょう、何げない日常の話題でいいので毎日更新することが大事なんですよ、ページ数が増えると
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
もっと広まって欲しいCSS - dskd
公開日2013-12-02タグAdvent CalendarCSSCSS Property Advent Calendar 2013 ２日目のエントリです。 何度も同じことを書いているのでいいかげんにしろっていう感じがしますが、僕がこの１年半くらいで「なぜ使われないのだ！ もっと広まってくれ！」と思っている CSS について記載します。 position: absolute; を使った絶対中央配置 ある要素を包含ブロックのど真ん中に置きたい時はとにかく position: absolute; を使った絶対中央配置が便利です。大まかな書き方は親要素に position: relative; を指定したのち、配置したい子要素に対して下記を適用するというものです。 .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLテンプレート素材まとめ
レスポンシブWebデザインの基礎
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現
robots.txtとは？設置する理由・SEO効果・書き方を解説
