作ってはいけない最悪の同人サイト | 旅の道第三停留所
同人ゲームのホームページはどういうデザインがいいのか？そしてどういうデザインが最悪なのか。 それらを考えてみた話です。 ＿＿＿_ ／⌒ ⌒＼ ふう…… ／（ ●） （●）＼ 同人ゲームのトップページが完成したぜー ／::::::⌒（__人__）⌒::::: ＼ | |r┬-| | ＼ `ー’´ ／ ／￣￣＼ ／ _ノ ＼ | （ ●）（●） なに……これ…… | （__人__） コンテンツも何もないじゃないか | U ﾉ あるのはロゴ？だけ？ | ∩ノ ⊃ } リンクもないように見えるが…… /ヽ ／ ＿ノ } ( ヽ / / ノ ヽ “ /＿| | ＼＿_/＿＿ / ＿＿＿_ ／⌒ ⌒＼ ／（ ＞） （＜）＼ チッチッチッ…… ／::::::⌒（__人__）⌒::::: ＼
同人CD・同人誌の告知サイトを一瞬で作れるテンプレート「Tokusetsu 3」を作った - SANOGRAPHIX Blog
同人音楽CDや、同人誌の告知サイト（特設サイト）を一瞬で作れるテンプレート「Tokusetsu 3」というのを作った。↓ のリンクから DL できるので拡散希望です。 Tokusetsu 3 - 同人CD・同人誌告知サイトが一瞬で作れるテンプレート sanographix.github.io Tokusetsu 3 とは Tokusetsu 3とは、同人告知サイトに特化したテンプレートである。特に同人音楽の分野では告知サイトをつくる文化が根付いており、それをすばやく簡単に行えるテンプレートとして開発した。2013年に作った Tokusetsu 2 の後継バージョンにあたる。 Tokusetsu 2のリリースからもうすぐ3年が経とうとしており、おかげさまで色々な方に使っていただいている。実際に使われている様子をリリース以来観察してまわっていたのだが、その観察結果をもとにTokusetsu 3
「ウェブ時代のデザイナーのための文字組入門 」に参加してきました - デザイナーのイラストノート
JUSO Coworkingで10/4に行われた「ウェブ時代のデザイナーのための文字組入門 」に参加してきました。講師はなんでやねんDTPで有名な大石さん。最近パンフレットなど印刷物をご依頼いただく機会も増え、本を買って読むもののなかなか疑問を解消できないわたしにはぴったりの勉強会でした。今回の記事はIllustratorで印刷物のデータを作る、という前提です。 そもそも文字組・文字詰めは何のため webデザインでは、デバイステキストを自由に詰めたり組んだりすることがむつかしいため、文字組・文字詰めと聞くと「なんか難しそう」と構えてしまいがちです。 私たちがよく使うフォントというのは、四角い箱の中でデザインされています。しかし日本語のように「ひらがな」「カタカナ」「漢字」と様々な文字の形があると、当然小さい形、大きい形が出てきます。また、約物と言われる「」や（）や・などは、隣り合うと何だか
いま同人特設サイトが熱いっていう話 - MILKWALKEEのブログ
2014-06-22 いま同人特設サイトが熱いっていう話 ここ最近何か同人イベントがある度に、個々の作者がかなり凝ったデザインのWEBページを作成してるっぽい現象がある、告知ページというかティザーとかいうかそういうの。WEBデザインとか全然詳しくないからWordPressがどうのとかCSSがどうとかそういうの全然分からないけど、自分が作ったものに対して誤解なく正確に内容が伝わることは非常に大事。これはこういう理由で作って、こういう形で、中身こうなってます。売り手が買い手にわかりやすくプレゼンするっていうの大事。リフレーミングとかビジュアライゼーションとかそういうの有るっぽいけど、デザイン、特にウェブでの情報は受け手に分かりやすく伝えましょう、っていうの最近の流れだと思う。 同人特設サイト簡単に作れるっぽい Tumblrで同人音楽CD特設サイトが簡単に作れるレスポンシブなテンプレート「Tok
webデザインの賞味期限(もしくは技術的負債の話)
「技術的負債」という話が、はてな村大字テクノロジー周辺を賑わせている。 技術的負債という(非エンジニアにとっての)隠しパラメータが生産性100倍を起こす- mizchi’s blog 出来る人からみたら超絶無駄なレビューとテストの存在意義 – novtan別館 プログラマの生産性と報酬 – アスペ日記 あたりがにぎわっているエリアだろうか。 私はエンジニアではないから全ての話の理解はできないんだけど。『見えづらい技術的負債が発生し積み重なった結果、誰かが尻ぬぐいをしている』という状況はwebデザイン、特にUIデザインの現場でも同じだなーと思ってる。 糞コードならぬ糞UIデザイン。webディレクター、webデザイナー、コーダー、フロントエンジニア皆が想定しえない余計な工数をとられてしまうUIデザイン。そしてえてして「なんでそんなに工数かかるの？」と言われ、挙句ちゃんと状況説明を上司に怠ると「
美大で紙媒体専攻してた人がWebデザインやることについて - MEMOGRAPHIX
ぼくは美術大学で4年間デザインを勉強してて、なかでも紙媒体のグラフィックデザインを専攻してた。所属研究室もプリントメディアを専門にやるところだったし、卒業制作も、なんか本みたいなの作ってた。だから、ぼくがWebデザインをやっていることについて、意外に思われたり、不思議がられたりすることがある。その研究室でわざわざWebデザインを志す人は殆どいないからだ。 しかし、紙で学んだことが無駄だと思ったことは一度もなくて、むしろWebデザインで非常に役立っている。ぼくが紙媒体を専攻してた理由は、紙は歴史のあるメディアだし、グラフィックデザインの基礎をちゃんと学ぶのに最適と思ったからだ。基礎というのは、タイポグラフィの扱い方とか、ジャンプ率とか、配色とか、そういうデザインの諸ルールのことで、そのルールはそのままWebデザインに通用する。今のWebデザインの流れを見ていると、フラットデザインとか、Web
Responsive Design Testing
Responsive Web Design Testing Tool This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page. Unfortunately, with the way browser security works, you are unable to navigate your site through the frames that your website
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
少ない装飾で素材の魅力を生かす、ズルいWebサービスデザイン実践編 // Speaker Deck
WCAF Vol.11 「Design」 in 福井 で発表させていただきました。 http://wcaf.doorkeeper.jp/events/7028 協力： we love heroku by @ppworks http://welove.herokuapp.com/ （参考）ppworks 氏によるエントリー http://www.genuineblue.jp/posts/weloveheroku-design-renewal/ ズルいデザインテクニック2013 + セミフラット version - in 福井 https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku2013-plus-semihuratuto-version-in-fu-jing
「実務で使うためのレスポンシブWebデザインの基礎・実践」に参加しました。 |
11月16日に北九州のMIKAGE1881 で行われた「実務で使うためのレスポンシブWebデザインの基礎・実践」に参加してきました〜！ 今回は「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)」の著者である菊池崇さんにお越しいただき、とても濃い内容の勉強会となりました♪ ▼菊池崇さんの略歴はこちら http://all-web.org/instructors/#satoshi-kikuchi 今回は北九州の開催であったにもかかわらず、福岡からの参加者の方も多く、大盛況！ 私はまたもや受付をお手伝いさせていただきましたよｗ 期待通り、参加してよかったー！と思えるセミナーでした♪ 私の脳みそでは理解できないことが多すぎたのですが、自分用にメモった内容をまとめます。 RWD（レスポンシブWebデザイン）導入の障壁 １．クライアントの理解
日本のウェブデザインはなぜこんなにも世界と違うのか？ - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
本記事は、ブログ『RANDOMWIRE』の運営者の許可を得て、翻訳しています（元記事）。 静寂が満ちる禅庭園、美しい神社、静穏な寺、洗練された茶道。日本の伝統建築、現代建築、書籍、雑誌は世界中のデザイナーの羨望の的だ。 だが、どうしてか、こうした巧みな技術はデジタルプロダクトには生かされていないようだ。特にそれが顕著なのは、ウェブサイトだ。その多くが、1998年のスタイルから変化していないように見える。 例１：楽天市場 有名な日本のサイトの多くを見てみると、次のような傾向が見られる。（例えば、 Yahoo Japan、楽天、ニコニコ、JR東日本、読売新聞…） 隙間なく敷き詰められている文字 小さく、画質の悪い画像 数えきれないほどのカラム 色同士の調和に欠ける派手な色使い、きらきら光るバナー Flashのような、過剰に使用される時代遅れのテクノロジー 美しい俳句、質素なわび・さびとはかけ離
プロっぽくなった！フォントや「文字」に関するまとめ
作成：2013/10/28 更新：2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつける ８．書体 ９．読みやすいフォントサイズ １０．見やすい文章 １１．Webフォント スライド １２．フォントに関するスライド フォントに関する知識 １．字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト
iOS7な色合いのカラーコードをコピペ出来る・「iOS 7 colors」
iOS 7 colorsはiOS7風の色合いのカラーコードをコピペ出来るようにまとめたWebサイトです。マウスを乗せるとカラーコードが表示されます。グラデーションの場合はそのグラデ用のカラーコードが表示されます。インスピレーション向上に良さそうですね。 iOS 7 colors
テキストのコントラスト比でWeb制作会社のよしあしを判断する | ウェブ配色 | ブログ | フォルトゥナ
とあるWebサイトを見ていて、ものすごく読みづらいメインビジュアルのキャッチコピー(すなわち最も伝えたいであろうというコピー)を見つけたのですが、もしかするとその辺りをチェックすると制作会社のよしあしを見極められるかもしれないと思ったのでまとめてみました。 コントラスト比は1.34:1でした テキストの読みやすさの感じ方には個人差があるので、今回はJIS規格(JIS X8341-3:2010)でも採用されているコントラスト比を基準にして話を進めます。コントラスト比のことがわからない方はいったん下記の富士通のページをご覧ください。 http://jp.fujitsu.com/about/design/ud/jis-sc/sc7143.html 簡単に言うと、背景が白で文字が黒という最も色の差が大きい組み合わせだと21:1に、背景と文字が同じ色で、まったく見えないという場合には1:1という数値
こんなUI/UXはイヤだ
業務中にメモっていた、イヤなUI/UXのメモを公開。（スマホ中心） こう見てみると、多少はチェックリスト的に使えるかも知れないです。各事例の画像が貼られていないのはご勘弁を。 思ってたのと違う。。△ 入力フォームなのにその場で入力できない 見た目は入力フォームなのに、タップするとモーダルで入力画面が立ち上がってしまうと違和感がある。そのままその画面で入力できるようにするか、どうしても別画面を立ち上げる必要があれば、入力フォームをボタンに変えた方が自然なUIになる。 △ 押せそうなのに押せない 立体感があったり囲まれていたりしてボタンのように見えるUIなのに、実際には押すことができないとストレス。遷移先の画面が存在しないのであれば、ボタンに見えるような紛らわしいデザインにしない。 △戻るボタンなのに1つ前に戻らない アプリ内ブラウザで外部サイトを立ち上げる際、画面の上部（ナビゲーションバー）
実例で納得！シニアが使えないサイトの例 | マミオン有限会社-パソコン・数学研修、法人研修
パソコン教室でシニア層にインターネットの使い方を教えているときほど 「ああ、ここがもう少し改善されれば！」と吠えたくなる時がある。 「知りたい事」「申し込みたいもの」「買いたいもの」があって ワクワクしているのに、多くの人が、若い人に取っては「些細な」ミスで サイト上で目的を達成できずに諦めたり、 諦めきれないからとサポートセンターに電話して 「その情報はホームページに載ってます」と言われ落ち込んだりしている。 今日は大学の公開講座に申し込もうとしている70歳代後半女性の話。 ウキウキの申し込み「大学の公開講座申し込みたいの。英語をやり直したいのよ」といらしたMさん。 「新聞の折り込みで講座を見たのだけど、ホームページから申し込んでって書いてあって。 ホームページを見たのだけどどうすればいいのかわからないけど ホームページからしか申し込めないらしいから、やり方教えて」 とのこと。 チラシに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OSHIRASE
新着記事
The remote user research platform
for human insights
