2014年Webデザイナーはコードをどこまで学ぶべきか、Webデザインが今までどのように進化してきたかのまとめ
Webデザイナーはコードを学ぶべき？ コーダーはデザインを学ぶべき？ 両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。 A brief history of web design for designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 先日の彼らの記事「しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。 1989年：Webデザインの暗黒時代 1995年：Webデザインの始まりはテーブルから 1995年：JavaScriptが表現の幅を広げる 1996年：Flashにより自由の黄金期へ 19
UIデザイナーはいらないのか？その存在意義について改めて考える【連載:えふしん】 - エンジニアtype | 転職type
Twitterクライアント『モバツイ』開発者であり、2012年11月に想創社（version2）を設立した有名エンジニア・えふしん氏が、変化の激しいネットベンチャーやWeb業界の中で生き残っていくエンジニアの特徴を独自の視点で分析 藤川真一（えふしん） FA装置メーカー、Web制作のベンチャーを経て、2006年にGMOペパボへ。ショッピングモールサービスにプロデューサーとして携わるかたわら、2007年からモバイル端末向けのTwitterウェブサービス型クライアント『モバツイ』の開発・運営を個人で開始。2010年、想創社を設立し、2012年4月30日まで代表取締役社長を務める。その後、想創社（version2）を設立しiPhoneアプリ『ShopCard.me』を開発。2014年8月1日からBASE（ベイス）株式会社のCTOに就任 Webやアプリのユーザーインターフェースを設計する専門家であ
切れないハサミと使えないWebデザイン | ベイジの社長ブログ
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
ディレクターがワイヤーを書く直前にやるべき超細かい事あれこれ
ども。ナカムラです。 今回はいつもの「やたら上位に食い込みたがるディレクターズマニュアルの記事」と比べるとかなり粒度細かめ。 実際の現場でディレクターがワイヤーを書くその前に「やらなければいけないこと」とその理由について解説してみたいと思います。 ちなみに、お題は「既存コンテンツありのリニューアル with Word Press 案件」と仮定してみます。 さて、ワイヤー書く前にディレクターって何やればいいんでしょうね？ とりあえずサーバー周りの情報整理 WordPressに限らず、どんな案件でもまぁ必須。なんかしらCMSを乗せる場合であれば間違いなく事前に確認しておかないと大怪我するアレですね。 とりあえずLAMP動くかどうか？とセキュリティ系の情報くらいは整理しときます。 この辺の情報は1枚のドキュメントにまとめといたほうが後で楽かもですね。 既存のページ調査 リニューアルであれば、まず
iPhone 6でのスマートフォンデザイン
iPhone 6でのスマートフォンデザイン iPhone 6の発売日を明日に控え今後のスマートフォンサイトデザインをどのようにしていけばよいかSNSで見かける悲鳴を拾い上げながらQ＆A形式で答えて見たいと思います。(実物を手に入れて間違っていたら後日修正します) Q.1 iPhone 6の解像度が750×1334でdevice-pixel-ratioが2だとCSS解像度は375×667だけど横幅320pxでデザインしても大丈夫？ A.1 横幅320pxでデザインしても大丈夫。基本最近のスマホ対応では多解像度に対してリキッドでフィットするようにするのが主流。 リキッドの場合ベースデザイン320pxを375pxに広げて表現するのは難しくないが、ベースデザイン375pxを縮めて320pxで表現するのは至難の業なのでスマートフォンデバイスでの最小幅である320pxでのデザインは当分続きます。 Q.
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
マージンを制するものがスマートフォンデザインを制す！〜iPhone6/6Plusの登場で、マージンがどう変化したのか〜 | 株式会社エウレカ
マージンを制するものがスマートフォンデザインを制す！〜iPhone6/6Plusの登場で、マージンがどう変化したのか〜 デザイナーの亀谷です。 突然ですが、スマートフォンのデザインで、大きく差が出るポイントはどこだと思いますか。 もちろん意見は様々あると思いますが、私が考える最も大きなポイントは「マージンの取り方」です。 そこで今回はその「マージン」をテーマに、iPhone5とiPhone6/6Plusのマージンの変化に関してお話したいと思います。 マージンを制するために重要なもの 美しいマージンの取り方には知識と経験が非常に重要です。 水野学氏の著書「センスは知識からはじまる」にもあるように、美しいマージンの取り方においても知識が非常に重要です。 私は、具体的には以下の3つの目線から日々インプットを行っています。 常日頃から可能な限り多くのサービスに触れることで、感覚を養う。 美しいと感
アップルのWebサイトが今さらスマートフォン対応をした理由 | ベイジの社長ブログ
2014年9月9日、アップルの新製品発表会が行われました。 人々の注目は、iPhone6とApple Watchだったと思いますが、Web制作者としてちょっとした驚きだったのは、発表と同時にWebサイトがスマートフォン対応したことです。 現在、多くの企業サイトで、スマートフォンからのアクセスが急増しています。スマートフォンユーザが直接的なターゲットとは考えにくい企業サイトでさえ、スマートフォンからのアクセスが3～4割を超えることが当たり前になってきました。 モバイルファーストという言葉も生まれ、スマートフォン対応をしているかどうかを、検索アルゴリズムの評価項目に加えているとGoogleが公言するほど、「スマートフォン対応＝正しいWebサイト」とさえいえるようなムードの中で、アップルだけは、頑なにWebサイトのスマートフォン対応を行なってきませんでした。 このアップルの選択は、「アップルでさ
「Webディレクター」という肩書とその役割 | F's Garage
先日、WebSigの10周年イベントの検討会議の場で、Webディレクターとは？というの話になった。 昔よく言われたのは、「Webディレクター」は「デザインできない」「開発できない」人がなる職業というネガティブな表現があった。特に「Webの仕事」と言えば「Webの受託制作」だったころは、そういう人たちが沢山集まってきていた。 そういう中で、「工程管理しかできないディレクター」とか「気が効かないディレクター」とか、「言われたことしかやらないディレクター」とか、確かに、いろいろいたように思える。 またネガティブな意味で、「Webディレクターとは何でも屋なんだよ」と言われることもある。これはある意味真理だと思っている。 個人的に思っているディレクターの重要な役割とは、 「バネのように、状況（案件）に応じて自在に伸び縮みして、お客さんと制作との穴を埋める仕事」 だと思っている。 PMが全体を見ている
Webサイトで全角英数字ではなく、半角英数字を採用する理由
Webで文章を掲載する際、英数字は半角表記で統一するのが「常識」です。ですが、なぜ全角英数字はダメで半角英数字に統一するべきなのでしょう。改めて聞かれるとついつい「そういうものだから」と答えてしまいがちではないですか？ また、検索してみても、ちゃんとまとめられた記事がなかなか見つけられません。ということで、全角英数字ではなく、半角英数字を採用する理由をまとめてみました。 ※本記事は技術的な検証が十分に行われておらず、誤った情報である可能性があります。あらかじめご了承ください。 全角英数字は再利用性できません たとえば、電話番号やURLが全角で表記されていると、Office製品やメーラーでリンクとして認識されません。ブラウザのアドレスバーにコピーアンドペーストしても開けず大変不便です。 全角英数字は禁則処理が行われません ブラウザでは英単語が途中で改行されないよう折り返しが行われます（禁則処
ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略 - 情報建築家 石橋秀仁
本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作
Webクリエイターボックスを（プチ）リニューアルしました
2014年8月19日 お知らせ 約2年半ぶりにWebクリエイターボックスのテーマをリニューアル！という事で、変更点をザックリと紹介します。とは言え全体のデザイン自体はあまり変わっておらず、細かいところや内部の修正・更新がメインとなっています。ちなみにブラウザーはChrome, Safari, Firefoxの最新版、IE11対応。Webクリエイターボックスに訪問するユーザーで、IE10以下を利用の割合は1.5%をきっていたのでバッサリ捨ててます。古いブラウザーを利用の方はアップデートしましょう ;) ↑私が10年以上利用している会計ソフト！ SVG画像 背景やアイコンなどで使うデザインパーツの画像をSVGに変更しました。レティナディスプレイのMacに変えてからというもの、どうも画像のギザギザが目についてしまって。リデザイン前のテーマでも一部SVGを使っていましたが、今回総入れ替えしました。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
WebデザインのPhotoshop納品で間違ったことはしていませんか？
1pxのズレはコーディングできないデザイン！ DTPの世界でもグリットシステムは利用し、数値を利用して配置するデザインは基本中の基本ですね。 しかしながら、マウスを引っ張って配置するようなデザインをして、数値を利用したデザイン配置をしないデザイナーが存在します。 感覚だけで配置するデザインなので、1pxのズレなども多く発生します。このようなデザインをコーディングには大変なことなります。正直言うと、コーディングできないデザインなのです。 そんな当たり前のことができていないデザイナーが多い？ことから、海外では「photoshopetiquette」Photoshop エチケットというコンテンツがありましたのでご紹介いたします。 日本でも同様に起きていますね！弊社でもこのようなデザイン、ファイルを納品されて困ったケースがあり、受講生に聞いても同じ悩みがあるようです。 プロとして最低限のマナーなの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
『切れないハサミと使えないWebデザイン | ベイジの社長ブログ』へのコメント
Kamiya Consulting, Inc.
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
UX/UIデザイン - OHAKO | 企画～実装をご支援
