初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
2017年の流行を先読み！ウェブデザインを考える際に気に留めておきたい7つのトレンド - Brian'z Imagination
世界の変化は、とても早い。中国はあっという間に日本のGDPを抜かしてしまったし、ついこの間決まったような東京オリンピックもあと4年で始まってしまう。 そしてウェブデザインに関しても、例外ではない。ぼくはウェブデザインの勉強をして12年になるけれど、昔はTABLEレイアウトという、今考えると全くイケていない方法でデザインが行われていた。けれども今は、さまざまなテクノロジーの登場で、イケてるサイトを素早く作ることができるようになった。 今回は、ぼくがウェブデザインをするときに参考にしているトレンドを、イケてるウェブサイトとともにまとめてみようと思う。古風であまりオシャレでないウェブサイトは、完全に除いている。 1. ストーリーテリング UX(ユーザーエクスペリエンス)を最大化する、ということはウェブ業界では久しく言われてきたことだ。単にクールなだけでなく、ブラウジングする際に読み手にどんな体験
デザイン力を鍛える！Webデザインのフロー別セオリーと知識まとめ
以前、「WEBデザインが短期間で上達した方法」では、 上達する近道として模写を紹介しましたが、 それ以外にも基本的なセオリーや知識を知っているだけで、 デザインをする力が格段にアップします。 4月からWebデザイナーになる人、また学校に通う人向けに Webデザイン（カンプ）を作成する際のデザインの制作フローごとに 大雑把にですがビジュアル面を中心として、 セオリーと知識をまとめました。 もくじ 情報共有 競合調査 ワイヤーフレーム デザイン 完成に向けて まとめ 余談 情報共有 ディレクターや営業と情報を共有し方向性を統一するのが第一歩。 どのようなクライアントで、どのようなデザインをするのかを ヒアリングやミーティングで共有することで、 デザインのクオリティが変わってきます。 ウェブ制作で使えるヒヤリングシート ディレクターとデザインのあれこれを共有する方法のまとめ 競合調査 クライアン
7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
手書きワイヤーフレームのススメ - Qiita
みなさん、デザイン作り始めるときノートと鉛筆使ってますか。 私はめっちゃ使います。 今回は「紙にアウトプットすると良いことあるよ」というお話です。 手書きワイヤーフレームを引く利点 推敲が楽チン（書いたり消したり） ノートひとつあればすぐ確認に走れる ページ構成の「設計」思考が身につく 【実例】ワイヤーフレームを引かなきゃ損！ 実際のお仕事の流れを追いながら、ワイヤーフレームの便利さを訴えていきたいと思います。 まず構成案を読み解く はじめに受け取った構成案を眺めます。 今回作成するのはLP（ランディングページ）の「FXのはじめかた」。 FX初心者（女性）に向けたHowTo記事です。 ディレクターから受け取った構成案はコレ。↓ FX初心者向けのイロハが丁寧に解説されています。 ディレクターの意図を聞く ヒアリングの結果、ポイントは３つ。 ターゲット：FX初心者の女性（主婦、OL） 清潔感
Belajar Bahasa Inggeris Online 2022 (Kelas English 1-to-1)
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
skuare.net
AMP（Accelerated Mobile Pages）対応におけるサイト作成と広告表示などなど 当サイトをAMP（Accelerated Mobile Pages）で構成しました。 元々別ページでAMP用ファイルを設けていましたが、スタンドアロンAMPのススメ - Mercari Engineering Blogという記事を見て、統一してしまおうと思ったのがきっかけです。
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
Webサイトの設計図「ワイヤーフレーム」とは？
更新日: 2017年3月15日公開日: 2015年8月13日Webサイトの設計図「ワイヤーフレーム」とは？ Webサイトを作成する際には、多くの関係者が携わるため、効率的にコミュニケーションをとるのは困難です。依頼主や企画担当者はもちろん、プロジェクトマネージャー・エンジニア・デザイナーといった様々な役割のあるチームの中で、共通理解を作り出す必要があります。Webサイトのデザインに関しては、ワイヤーフレームを利用すると効果的にコミュニケーションが行えます。 ワイヤーフレームとは何か ワイヤーフレームを一言で言うと「サイトの設計図」です。サイトを開発する前に「何を・どこに・どのように」画面に配置するかを明らかにすることができます。視覚的で分かりやすいため、どの役割の人も同じように理解を深めることが期待されます。また、Webサイトの開発には時間がかかってしまいますが、ワイヤーフレームは簡単に作
ワイヤーフレームとは何か？webサイト制作に重要なページ設計図を理解しよう！
ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。 webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。 単に「ワイヤー」と呼ぶことも多いですね。 この記事では、「最近web制作を始めた！」「初めてサイト制作を外注するけど、なにがなにやら……」という人たちに向けて、ワイヤーフレームの役割や簡単な作成手順を説明していきます。 自作で簡単なwebサイトを作るときも、制作会社に委託するときも、絶対に必要となってくるワイヤーフレーム。 なぜ必要なのか、どのように役立つのか、という基本を一度しっかりと理解しておきましょう。 １．ワイヤーフレームとは何か 冒頭で述べたとおり、ワイヤーフレームはwebページのレイアウトを決める設計図です。 しかし言葉だけでいわれても、イメージしづらいですよね。 まずは実際に、ワイヤーフレームを
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
センス上がった！タイプ別に分けたWebデザインの参考になるサイトまとめ
作成：2014/06/30 更新：2014/11/01 Webデザイン > サイトのデザインセンス、または操作性などが良いのか悪いのかわからない。 オシャレで洗練されたデザインにするため、少しでもセンスを上げるために色々なサイトをチェックしておきたい。 今回はただWebデザインギャラリーサイトを紹介するのではなく、ページ別・職種・動き・制作別など「サイト制作時に役立つ」くくりでまとめました。コーポレートサイトやECサイト・自社サービスのデザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 配色 １．グラデーション＋フラットデザイン ２．ダッシュボードの配色例 ３．高級感を出す配色 ページ別 ４．採用ページ ５．404ページ 職種別 ６．和菓子系（不足の美） ７．女性向け（エディトリアルデザイン） ８．医療系 ９
「エンジニア病」を抱えたあなたに効く「デザインの考え方」 ～ソニックガーデン・デザインメンター対談のまとめ～ - give IT a try
はじめに 先日、僕が勤務しているソニックガーデンのブログ記事で、弊社プログラマとデザイナーさんの対談記事が公開されました。 【前編】エンジニアの会社でデザインがうまくいくワケ〜「エンジニア病」にはダメ出しされよう 【中編】プログラミングとデザイン、やっていることはわりと同じ〜「デザインは感覚じゃない」 【後編】デザインできるプログラマの育てかた〜「デザインメンター制度」のキモは理由で納得！ インタビューに登場する町田さん（@machida）と赤塚さん（@ken_c_lo）は僕もよく知っているとても素晴らしいデザイナーさんです。 素敵なデザインができるのはもちろん、HamlやSassなどプログラマ寄りの技術知識も豊富に持ち合わせていますし、物腰も柔らかくてとても相談しやすい方たちです。 業界の各方面から引っ張りだこなのも十分頷けます。 ところで、上の記事の中に出てくる「デザインメンター制度」
ディレクション費って何？Webサイト制作費の内訳を大公開！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。WebディレクターのJackです。 ぶっちゃけ、Web担当者は「サイト制作にいくらかかるの？」ということが気にかかりますよね。とくに皆さんによく聞かれるのはディレクション費について。 「ディレクション費？ プランニング費？ いらないでしょ？ 値引きしてよ！」 そう思った方！ それは危険です！ Webディレクターの働きは目に見えづらいため、そう考える方も多いとは思います。しかし、プロジェクトの成否はWebディレクターにかかっているといっても過言ではありません。 本記事では、ディレクション費の内訳や、Webディレクターの役割、必要性についてご説明できればと思います。 ディレクション費ってなに？ Web制作におけるディレクション費とは、一言でいうとWebディレクターの稼働対価のことです。いわゆる人件費ですね。 たとえば下記のような稼働に対してかかってきます。 打ち合わせ（ヒアリング）
プロモニスタ | ウィルゲートのSEO・コンテンツマーケティング情報
こんにちは！ウィルゲートでマーケティング企画を担当している小笠原(@miyumaru222)です。 私の所属するマーケティングの部署では、9月から...
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違
新人Webデザイナーの私が、1年目で指摘されたことを振り返る [デザイン編] - IT系女子ログ
昨年、未経験からWebデザイナーとして入社してはや1年が経とうとしています。ふと自分を客観的に見つめてみると、「思ってた程、成長していない…」ということに気づき、今更ながら焦り始めているところです。情けないですが。 Webのことも入社前に比べ、遥かに知識を得たし、デザインやコーディング、プログラムのことも少しは自力で調べられるくらいにはなりましたが、あまり実務で役立てられていない、成果を発揮できていないと思っています。 そういう訳で、だらだら2年目に突入する前に、1年間で指摘されたこととそれを踏まえた目標を記録しておきます。 まずは、デザインについてです。 コーディング編はこちら。 新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ ※自分の為のまとめなので、読みづらいかと思いますがご容赦頂けると幸いです。 目次 指摘されたこと 指摘を受けて
![新人Webデザイナーの私が、1年目で指摘されたことを振り返る [デザイン編] - IT系女子ログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0ab65d030571dd540fe5560e3ec8cb1855013d6f/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftosssaurus%2F20150319%2F20150319001648.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nyle Engineering Blog
org-rabo.com