「Goodpatch Engineer Meetup Vol.3 エンジニア目線で考えるデザイン」で発表したスライドの公開版です。 https://goodpatch.connpass.com/event/56973/
以前、センスの磨き方というエントリを書いたことがありました。 その中でセンスを磨くことは「とにかくインプットの量を増やすこと」と述べました。 実際、何かデザインして行く過程において重要なのは「引き出しの多さ」です。 自分の好きなデザイン、クライアントが求めるデザイン、男性(女性)にウケが良いデザイン・・・ターゲットを定めてそこに刺さるデザインを作るうえでは、やはり作り手のインプット量がモノを言います。 普段ぼくが参考にしているサイトたちを紹介します! 世の中にはギャラリーサイトと呼ばれる、優れたデザインをたくさん集めたサイトが数多くあります。仕事の合間や休日家で過ごす時間にそんなサイトをぼんやり眺めてチェックしています。 そうして日頃から“イケてるデザイン”を吸収するように意識して生活していると、例えば買い物に行って洋服を選ぶときや、食卓に並ぶお皿を一枚買うときにもこれまで蓄積されたものが
アスタミューゼデザイン部のMatsumotoです。 ここ最近astamuse.comとastaIDのスマホ最適化の取り組みに合わせて、プロトタイピングツールを実験的に使い始めました。 ツールを使い始めてからまだあまり月日が経っていませんが、とにかく便利! ストレスなく今までのデザインプロセスが改善しそう! ということで、今回はプロトタイピングツールを使う利点や、実際のサービス開発において、どう作業効率がUPしたのかについて紹介させていただきます。 目次 プロトタイピングツール概要 ツールを使用するようになった経緯 ツールを使う目的 使ってみた3つのサービス比較 何が変わった? まとめ 参考サイト プロトタイピングツール概要 そもそもプロトタイピングとは何? プロトタイピング(Prototyping)とは、実働するモデル(プロトタイプ)を早期に製作する手法およびその過程を意味する。その目的は
Medium で公開された「5 Actual Web Designs Trends for 2016」 by Nils Sköldの許可をもらい、日本語抄訳しています。 This article is translated from Medium (https://medium.com/). 「いつの間にか気付いたら、2016年も半分を過ぎていた。」そんなひとも少なくないかもしれません。今回は上半期の総集編として、ウェブデザイナーが押さえておきたい、実際に流行っているWebデザイントレンド5つを、サンプル実例サイトと一緒に見ていきましょう。 01. フルスクリーン表示 + スクロールなし。 スクロールしないウェブデザインが、いよいよ人気となりはじめているようです。ヘッダーの一番上にアンカーリンクを固定し、下方向にスクロールを促す単一ページのウェブサイトは、ホームページ作成のスタンダードと言
SEOにも効果的!XML形式のサイトマップを無料で作成できるツールまとめ SEOにも効果のある「XML形式のサイトマップ」を作成できる無料ツールを紹介する記事です。XMLサイトマップをGoogleなどの検索エンジンに登録することで、ページを正しくクロールしてくれるようになります。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査 サイトマップは、サイト内にどんなページがあるかということをリストにしたものです。そのうち、検索エンジン向けのサイト
こんにちは、デザイナーの姐さんです。 今回は、地方自治体系の観光サイトや、特設サイトで気になったものをまとめてみたいと思います。 東日本編 青森県観光情報サイト アプティネット http://www.aptinet.jp/ 一言メモ:スライダーがカッコいい、スタイリッシュ、渋い。 ブンカDEゲンキ あきた文化情報サイト http://common3.pref.akita.lg.jp/bunka/ 一言メモ:賑やか、フラット、レスポンシブ、色使いが好き。 あきたファンドッとコム http://www.akitafan.com/ 一言メモ:和風、和菓子みたいな色使い、レスポンシブ、秋田はレスポンシブ頑張ってる。 群馬の観光情報|ググっとぐんま http://gunma-dc.net/ 一言メモ:ぐんまちゃんに寄せたテイスト、フッターがかわいい、ぐんまちゃんかわいい。 長野県、新潟県を楽しもう!
デザイナー兼踊り手のJona(@jona_yawaraka)です。わたしはLIGブログに掲載されるアイキャッチ(ブログ記事の顔になる画像)、バナー、背景ジャック(大型バナー)など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情
こんにちはデザイナーの藤田です。 最近、節約のために毎晩の楽しみである晩酌のビールを発泡酒に変えました。 さて、そんな私は最近コーポレートサイトのリニューアルを担当させていただく機会が多く、その際にお客様にリニューアルの方向性として提示させていただく「参考サイト」のストックがたまってきたので、今回のブログでは「イケてるコーポレートサイト」をご紹介したいと思います。 イケてる国内のコーポレートサイトまとめ ハウスウェルネスフーズ株式会社 http://www.house-wf.co.jp/ コーポレートサイトならではの清潔感や見やすさを担保しつつも、ホワイトスペースを十分にとることで、今っぽいデザインになっています。 ヤンマー株式会社 https://www.yanmar.com/jp/ 企業の先進性をデザインで表現しており、今後このようなデザインがコーポレートサイトのスタンダードになるので
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
Webサイトやモバイルサイトのワイヤーフレームがたくさん!でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
ホームページを運営し、改善施策を実行していくなかで、ホームページ内のデザインの微修正や画像の追加が必要になる場面が多々あるのではないでしょうか。 外部や社内のデザイナーに依頼する際は、仕様書を作成して、修正内容を確認して、修正されたら成果物をチェックして、必要があれば再度修正依頼をして…と、ちょっとした修正でも思った以上に工数がかかってしまう場合があります。 そんな時、ちょっとした修正や画像作成であれば自分でできるようになっておくと、上記のような工数を一気に短縮することができます。 今回は、ノンデザイナーでもある程度のレベルのデザインを作成するために役立つ知識やサービスをご紹介します。 1. 【非デザイナー必見!】知っておくべきデザインの基礎法則6つ https://ferret-plus.com/641 デザインは感性によるものが大きいというイメージがあるかもしれませんが、デザインにはい
WordPressでサイトを作るときに、参考になるWordpressサイトはないものかと思ったことが一度はあるはずです。 WordPressでつくられたサイトからはデザイン・機能・運営方法まで参考になることが多いのではないでしょうか。そこで今回はWordpressでつくられたサイトを有名なところから50個ピックアップしてまとめました。後から読み返しやすいようにサイトのタイプ別に分類しています。 ※2016年3月末時点でWordpressでつくられたサイトであることに注意してください。 企業サイト・組織サイト 株式会社カカクコム 価格ドットコムなどを運営する株式会社カカクコムのコーポレートサイト。 http://corporate.kakaku.com/ クックパッド株式会社 クックパッド株式会社のコーポレートサイト。 https://info.cookpad.com/ 株式会社ベクター オ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く