Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのトレンド -2018年1,2月
デザインで悩んだ時には、新鮮なトレンドをチェックしてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのトレンドを紹介します。 今まで使用してきたトレンドにも一手間加えられて、より魅力的なものになっています。 3 Essential Design Trends, January 2018 3 Essential Design Trends, February 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 左上のロゴをシンプルに 垂直型の細いサイドバー ピーチ・カラー サークル状の要素 分割レイアウト ダーク系の背景にホワイトのテキスト 左上のロゴをシンプルに このトレンドは見逃されがちですが、左上にブランドをテキスト化したものがカムバックしています。アイコンを含めるのももちろん有りで、注目
SINAP | 【書籍紹介】2017年度版：Web業界の新人さんにおすすめ！一度は読むべき本12選
こんにちは、ディレクターの北川です。 今回はシナップの研修で使用している図書について、夏に入社した北川と村田の２名でご紹介していきます。 新人研修で使用する基本編の図書を中心に、全体の研修で使用した応用編まで合計12冊となっていますので、Web業界の新人さんにとって、日々の業務に役立つ図書が多く見つかるはずです！ それでは早速ご紹介に移りましょう。 おすすめ一覧 1 . 『ビジネスマナーの解剖図鑑』 2 . 『世界一やさしい問題解決の授業』 3 . 『ウェブの仕事力が上がる標準ガイドブック』 4 . 『リーン・スタートアップ』 5 . 『Running Lean』 6 . 『IA/UXプラクティス』 7 . 『Web制作者のためのUXデザインをはじめる本』 8 . 『次世代Webサイト構築ワークフロー』 9 . 『Webディレクションの新・標準ルール』 10 . 『誰のためのデザイン？』
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
Sketchで作ったスクリーンにリンクを付けてHTMLとして出力するプラグインが登場
Webデザイナーにプロトタイピングツールはもう不要…？ こんなプラグインが出ていました。 Click-Thru Prototype 「Sketch plugin that creates a HTML click-through prototype of a website design」とのこと。 これがすごい便利！ ・Sketchで作成したスクリーンの特定の箇所にリンクが貼れる ・もちろんリンク先のアートボードを指定可能 ・クリックしたときにJavaScriptで表示するアラートも再現可能 ・スマホのメニューみたいなのも再現可能 ・PC・タブレット・スマホのレスポンシブWebデザインも再現できる なんじゃこりゃ！！ Click-Thru Prototypeの使い方 まずはプラグインをインストール。githubから落としてもいいですが、今回はSketch Toolboxを使用します。コレ
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
あなたはいくつ知っていますか？2016年に最も話題になったWebデザイントレンド17選
2016年も1ヵ月を切り、アッという間に2017年を迎えてしまいそうです。 今年1年Webデザインの世界においても様々な重要キーワードが登場しました。その中でも今回は、2016年に登場した、最も話題になったWebデザイントレンドを17個紹介していきます。 これから紹介する17のWebデザインのトレンドの中で、果たしてあなたはいくつ知っているでしょうか。ぜひ、ご自身でチェックしてみてください。 2016年に登場！最も話題になったWebデザイントレンドまとめ 1. マイクロインタラクション Facebook上で「いいね！」をタップする際にもちょっとした吹き出しのアニメーションの中にいろんな感情ボタンが出てきます。そうした小さなアクション(トリガー)とそれに対するリアクション(フィードバック)を結びつける小さな「瞬間」に、毎日何十回、何百回と出会っています。これがマイクロインタラクションです。
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
プロトタイプやワイヤーフレーム作成ツールまとめ | WordPressやWebデザインなど紹介 Ocadweb
Webサイトやアプリの制作をするときには必須となるプロトタイプやワイヤーフレーム。 WEB制作を依頼するときにワイヤープレームありますかと聞かれることがあると思います。 Web制作依頼する前に、サイトの内容やイメージするデザインサイトやこういう風サイトにしたい、そしてワイヤーフレームを作っておくと話が早いと思います。 もちろんパワポでも、Keynoteでも作ることができます。 今回はプロトタイプやワイヤーフレームを作成するときに便利なプロトタイプやワイヤーフレーム作成ツールをご紹介します。 まずは「プロトタイプ」や「ワイヤーフレーム」について。 プロトタイプやワイヤーフレームとは プロトタイプとは ページを構成する要素や機能だけでなく、ページ間の遷移やクリックしたときの動きや操作感などの確認ができるものをプロトタイプ（試作品）と言います。 本格的な制作に入る前にプロトタイプを作成することで
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
Googleがウェブマスター向けガイドラインを大幅改定 ―― いったい何が変わったのか？
[レベル: 初・中・上級] Googleは、ウェブマスター向けガイドラインを大幅に改定しました。 この記事では、主だった変更点を抽出して解説します。 認識しておきたい変更点が数多くあります。 新しいウェブマスター向けガイドラインの主だった変更点 セクション分け 以前は、次の3つのセクションに大きく分かれていました。 デザインとコンテンツに関するガイドライン 技術に関するガイドライン 品質に関するガイドライン 現在は、2つに分かれています。 一般的なガイドライン 品質に関するガイドライン 内容が減ったわけではなく、「デザインとコンテンツに関するガイドライン」と「技術に関するガイドライン」の2つが、「一般的なガイドライン」にまとめられた感じになっています。 「一般的なガイドライン」はさらに次の3つのサブセクションに分かれています。 Google がページを検出できるよう手助けする Google
丁寧な「要件定義」がWebディレクターの武器になる！進め方やコツを解説
Webディレクターの毎日は、協力的でものわかりのいいクライアントとスムーズにやりとりしながら、クオリティの高い制作物を完成させていく…なんて順風満帆なことばかりではありません。むしろ「クライアントの要望がどんどん増えて困った」「言った、言わないでモメた」「炎上した」、挙句の果てに、スタッフは徹夜でボロボロ、お金も請求できなかった…そんなトラブルの数々に頭を抱えることのほうが多いかもしれません。 しかし、『失敗しないWeb制作 プロジェクト監理のタテマエと実践』（ワークスコーポレーション）の著者・みどりかわえみこさんによると、トラブルを避けながら制作物のクオリティを上げるためには、「きちんと要件定義を行う」こと重要とのこと。要件定義をしたことがない人も、してはいるけど本当に必要なのかイマイチ分からないという人も、今一度要件定義について学んでみましょう。 目次 今さら聞けない!?イロハのイ～そ
ストーリー性のあるランディングページを作成するときに使いたいフレームワーク4選
この記事は2015年10月23日の記事を再編集しています。 個人や企業がインターネット上でホームページを開設するのは、多くの場合、ユーザーからのアクション、つまりお問い合わせや資料請求、会員登録や販売経路を増やすことを目的としています。 そのためには、製品やサービスの優れた点をただ訴えるだけではなく、興味を持ってアクセスしてくれたユーザーに実際に行動に移してもらえるように、ストーリー性のあるランディングページが必要であると言われています。 自社製品に興味を持ってくれたユーザーのほとんどは、その製品やサービスが本当に自分の求めているものなのか疑いの気持ちを抱いています。 その疑いや心配を取り除くためにどのようなコンテンツが適切でしょうか。 今回は、ストーリー性のあるランディングページ制作のためのフレームワークをご紹介します。 ストーリー性のあるランディングページ制作のためのフレームワーク4選
ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ
2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート - コムテブログ
TL;DR 遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり（初期費用・ランニング費用）を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットや本でも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトや EC サイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめました。ヒアリングシートにも応用できます。会社によって違うと思いますが、ざっくりとメモしておきますので、後は自分流にアレンジしながらご活用ください。 メール用テンプレート ここからはメール返信用です。 コーポレートサイト コーポレートサイトの制作依頼があった時に、具体的にどんな内容をヒアリング、または聞いておけばよいのか項目をまとめました。聞き出した内容をもとに社内スタッフと共有し概
修正依頼をよりスムーズに！ウェブ制作におけるバグ報告を超効率化するUSERSNAPが便利！ | バンクーバーのうぇぶ屋
WEB制作において、クライアントに確認の依頼をして、修正依頼って夜中に来たり、納期ギリギリに来たりすると困りますよね。それで愚痴る人も少なくないと思います。でも、よく考えたらなんでそんなに時間がかかっているんでしょう？ もしかしたら、クライアントが修正依頼を報告するまでの課程に問題があるのかもしれません。よくいるクライアントは、修正依頼を書くまでの課程が… 修正確認ページをぷりんとあうとー → 手書きで修正 → スキャン → 送信 → また修正見つけたけどさっきスキャンした紙どこやったっけ？ → またプリントアウト → 手書き修正 → スキャン → あれ一枚目の修正どんな内容だったっけ？ → 以下無限ループ ・・・・無駄しか無いわ！！！無駄以外探すのが難しいわ！！ まぁ、でもこれはクライアント側も可哀想。WEB屋ならまだしも、WEBサイトの修正依頼にどれだけの時間を使わせるつもりかと…そり
LEAN UXに必須のモックアップを無料ですぐに作れるツール5選 | coromos
LEAN UXの広まりによって可能な限りLEAN UXの広まりによって可能な限り”最小の開発”が、求められるようになりました。 その中で少しの手間でサービスを可視化できるように、モックアップを作る必要がでてきています。 今回はそのモックアップを、”綺麗でかつ簡単に”作る為の無料ツールを紹介します。 Moqups ドラッグアンドドロップで画像追加でき、カンマ区切りでタブが作れます。 初めてサイトを訪れるとアニメーションの説明がついていてわかりやすい解説があるので、こういったツールを使ってことのない初心者の方もすぐに使いこなせるようになります。 ただし、アイコンが少なめなので、デザインの幅は狭まってしまうこともあります。 cacoo もはや知らない人はいないと言っても過言ではないくらい有名なツールの１つです。日本語にも対応していて取っ付きやすいのが特徴です。 PENCIL PRO
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
