自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
スキルが増えた！今後を生き抜くためにＷｅｂデザイナーも習得しておきたい技術
作成：2014/03/17 更新：2014/11/01 Webデザイン > クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コンテンツ設計 １．イラスト作成のスキル ２．写真の撮影技術と知識 ３．動画編集の技術 ４．コピーライティング ５．モーショングラフィック ６．電子書籍の作成 Webデザイナーの基本知識とスキル ７．UX・UI・IAの知識 ８．レイアウト基本原則 ９．配色＋色彩計画 １０．フ
デザインする上で大切にしていること - デザイナーのイラストノート
デザインしてますか？spicagraphです。ふだんツールに関する記事を書いたり、Twitterでつぶやいたりしていると「こいつ見た目のことばっかりやな」と思われそうで、めずらしくデザインするとき大切にしていることについて書きます。わたしの仕事は主にEC、LP、プロモーション、コーポレートサイトなので、UI/UXみたいなかっこいい話でないことは前置きしておきます（でもだいじなおしごとだよ！） デザインは誰のため？ 大前提として、わたしは誰に向かってデザインしているのか。 わたしはフリーランスで仕事をしているため「お客さん」がたくさんいます。仕事をくれた制作会社のディレクターさん、クライアント、ユーザーです。webサイトの「お客さん」はユーザーですが、ユーザーだけがいいと思うものだけが良いデザインだとは思いません。 webサイトは更新されていくものです、多くの場合はクライアントによって。とい
Scrollback - サイト内に設置するごくごく小さな掲示板 MOONGIFT
Scrollbackはnode/JavaScript製、GNU Affero General Public Licenseのオープンソース・ソフトウェアです。 Webサイト内でコミュニケーション機能を提供するなら何を使うでしょうか。掲示板、チャット、コメント機能などが考えられます。今回はその一つ、ごく小さなフォーラム機能を提供するScrollbackを紹介します。 作成例。画面下にあるコードを任意のWebサイトに埋め込みます。 そしてそのサイトを表示すると、右下にバーが表示されるようになります。 クリックするとチャット（フォーラム）ウィンドウが開きます。 日本語も送れます。記述すると他のウィンドウはタイトルが変化してメッセージが来たことが分かるようになっています。 ユーザ名の変更も可能です。 Scrollbackはフォーラムというよりもチャット機能に近いシステムになります。URLごとに分か
TogetherJS – 埋め込むだけでサイトにチャットなどの機能を追加する
Hacker Newsを見ていたらMozillaの公開しているプロジェクトが話題になっていました。内容はシンプルかつ強力です。JavaScriptのコードを埋め込むだけでWebサイト上でチャットやカーソル位置の共有、音声チャットといったコラボレーション機能が使えるようになります。 TogetherJSは次のような機能をサポートしています。 ビデオと音声のチャット テキストチャット カーソルとクリックの共有 共同ブラウジング ユーザ情報の共有 リアルタイムコンテンツ同期 埋め込むだけで使えるというのはどういうことかと思いますが、実際にはJSで書かれたサーバサイドモジュールとクライアントサイドのスクリプトで構成されています。サーバーサイドを自分自身で稼働させる事も勿論できますが、サンプルとして貼り付けるコードについてはMozillaがホスティングしているhubというサービスをサーバーサイドとし
背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
Webで動かしながら操作案内を簡単設置！ 使わないとかなり損するIntro.jsとは
Webで動かしながら操作案内を簡単設置！ 使わないとかなり損するIntro.jsとは：HTML5アプリ作ろうぜ！（8）（1/2 ページ） HTMLに属性を追加していくだけで、実際に操作しながら案内できるチュートリアルを簡単に付けられるJavaScriptライブラリの使い方を解説します。 動画や専用ページのチュートリアルより分かりやすく、HTML初心者でも手軽に設置できるIntro.js 今回の「HTML5アプリ作ろうぜ！」は、「Intro.js」を紹介します。 読者の皆さんは、Webサイト／Webサービスのチュートリアル／操作案内を作成するには、チュートリアル専用のWebページを作成したり、操作する動画を作成したりしている方も多いかと思います。Intro.jsを利用すると、実際に操作しながら案内できるチュートリアルを簡単に付けることができます。そのため、チュートリアル専用ページや動画を作成
Photoshopで継ぎ目のないテクスチャの作り方
Webサイトの背景に平坦な色を敷いたデザインよりもテクスチャやパターンを敷いたデザインの方が仕上がりのクオリティーが断然違います。 しかしフリーのテクスチャ画像をそのままPhotoshopでパターンとして登録して使うと、継ぎ目が出てし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
