CSS Gridの勉強会を開催しました
細部は発表しながら補足する前提で作成した資料のため、スライドだけでは情報が十分でない部分もありますが、概要は掴めるのではと思います。 また、スライド内で使用しているコードはこちらで確認できます。 コード一式はこちらからダウンロードできます。 資料やサンプルコードは学習や勉強会目的で自由に使用していただいて構いません。 また、誤りなどありましたらご指摘いただけると嬉しいです。 CSS Gridの資料を作成していて学んだこと 私自身CSS Gridを熟知していた訳ではなく、学んでいる段階でした。そこで、自分の学びを共有する形にしたら学びも深くなるし、他のメンバーのスキルアップにも貢献できると思い勉強会を開催しました。 資料作成の前はCSS Gridの基本的なことを把握している程度だったのですが、資料作成を通して新しい学びや発見が多々ありました。 特に学びの多かった点を下記に挙げます。 アイテム
スタートアップの成長とそれに伴うデザイナー組織の変遷
ペライチに参加した当初、私はフリーランスとして働いていたので業務委託として関わり始めました。 それまでにスタートアップで働いた経験はなく、またチーム開発の経験も殆どなかったので、サービス開発の手法や、チームでの開発などを学びながら手を動かしていました。 私の入る少し前に今までペライチに関わっていたデザイナーが抜けてしまったので、この時期はメインで働くデザイナーは私１人で、他にスポットで手伝ってくれるフリーランスのデザイナーの方が数人いました。 とにかく人手が足りないので、デザイナーという枠組みでしたができることは何でもやりました。 プロダクトのUI、サービスのwebページ作成、ペライチテンプレートの作成、印刷物・ノベルティの作成といった一般的なデザイン業務の範疇はもちろん、JavaScriptなども書いて小さな機能実装もしていました。明確なプロジェクトという単位はなく、デザインや開発は個々
ペライチの新しいロゴができるまで │ Design Spice
私が携わっているサービス「ペライチ」のロゴをリデザインしました。 今回のロゴができあがるまでの流れをまとめてみました。 背景 現在、私の勤めている会社は、誰でも簡単にwebページが作成できる「ペライチ」というサービスを開発、運営しています。会社の社名は株式会社ホットスタートアップでしたが、2017年の5月25日に株式会社ペライチに変えました。これは「ペライチ」というサービスが認知されてきたこと、社名をサービス名と同じにすることで今まで以上にこのサービスに全力を注ぐという決意の現れでもあります。 この社名変更を機にロゴも刷新することになり、デザイナーの私がこのプロジェクトに任命されました。 競合調査 始めに競合のロゴ調査から始めました。他社のロゴのイメージやどんなモチーフを使ってるかを調べたり、業種別・ロゴのテイスト別にポジショニングマップなどを作成し、その中でペライチのロゴが目指す方向を定
仕事を協力し合える仲間を探すサービスを作りました
フリーランス同士で協力することをメインの目的としたSketというサービスをリリースしました。依頼→受託の縦の関係よりは、横の関係を重視してます。 Sket 現在はベータ版で招待制となります。既に登録済みのユーザーは招待状を発行することができますので、周りに使ってるユーザーがいたら聞いてみてください。 あとは、ニュースレターにメールアドレス登録しておいていただけると今後のお知らせを受け取ることができます。（招待制を無くすかどうかはまだ未定です） 興味ありましたら登録しておいていただけると嬉しいです。 どんなサービスか フリーランスの方が、自分のリソース以上の仕事の依頼があった時に協力してもらえる方を探したり、専門分野以外の仕事をお願いできる方を探すためのサービスです。 僕自身がフリーランスとして数年やってきた中で、「こういうサービスがあったら便利なのに」と、考えていたものを形にしました。 な
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45選
photoshopのwebで使うエレメンツのファイルや、ブラシ、カスタムシェイプ、パターン、アクションなどの素材を無料で提供しているサイトを紹介します。 個人のブクマを整理してる段階でまとめたものですが、共有します。 photoshopのwebで使うエレメンツのファイルや、ブラシ、カスタムシェイプ、パターン、アクションなどの素材を無料で提供しているサイトを紹介します。 個人のブクマを整理してる段階でまとめたものですが、 共有します。 はじめに photoshopの素材を紹介しているサイトは多いので、 主にphotoshopの素材の提供を主としてるサイト、 またはそのようなカテゴリを持つサイトのみを集めました。 紹介文の後のリストはそのサイトで扱ってる素材の種類となります。 また、ライセンスについては分かる範囲で記載しましたが 間違いがありましたら指摘頂けると助かります。 サイト一覧 dev
web制作者が印刷物を制作するときにチェックしたい10項目
Webも印刷物も同じ制作物として考えられがちですが、必要な知識は全く異なります。 自分の経験も通して印刷物の制作時に気を付けたいポイントをまとめました。 Webの制作をしてると一緒に印刷物の制作も頼まれることがあります。 しかしWebも印刷物も同じ制作物として考えられがちですが、必要な知識は全く異なります。 自分の経験も通して印刷物の制作時に気を付けたいポイントをまとめました。 小規模の制作物が主な対象です。 納期の確認 用紙の選択 仕上がりサイズ 使用する色 色校正 印刷の種類 加工 使用する画像 データチェック 見積り 1.納期の確認 個人的に一番か二番目に重要視してます。 僕の仕事がたまたまそうなのか分かりませんが印刷物はタイトな納期が多いです。 直前まで自分で作業できるWebと違って、 印刷物の制作には当然ながら印刷の工程があります。 ここは外部に依頼する工程なので調整が難しい部分
ページをスクロールしたらオススメの記事を紹介してくれるSimpleReach THE SLIDE
最近海外のブログでよく目にする、 画面を下までスクロールすると右下から出現する「THE SLIDE」。 流行ってるのか知りませんが、取り敢えずこのブログも流れに乗っかって設置してみました。 最近海外のブログでよく目にする、 画面を下までスクロールすると右下から出現して オススメの記事を紹介する「THE SLIDE」。 流行ってるのか知りませんが、 取り敢えずこのブログも流れに乗っかって設置してみました。 インストール THE SLIDEは、そのページを見てる人にお勧めの記事を紹介してくれるウィジェットです。 WordPress、Drupal、Tumblr、Blogger、 その他ブログの様に記事を作成するタイプのサイトに使用できます。 WordPressにはプラグインがあるので、プラグインを利用すると簡単に設置できます。 ちなみにWordPressのプラグイン名は「SimplleReach
WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので作業の流れをまとめました。 WordPressのプラグインKtai Styleを使ったjQuery Mobileスマートフォンサイトを制作する流れです。 前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので 作業の流れをまとめました。 やり方は人それぞれだと思いますが、 作業の参考になってくれたら幸いです。 ラフの作成 HTMLマークアップ デザイン（テーマ）のカスタマイズ WordPressテーマ作成 Tipsなど 1.ラフの作成 一般的なwebサイト制作と同様にまずラフを制作します。 また、jQuery Mobileの特徴でもある画面遷移時の効果や、 表示のされ方などもこの時点で決めて
知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
私が利用してるWebデザイナー向け勉強会・セミナー情報サイト
数年前からちょくちょくwebデザイナー向けの勉強会やセミナーに参加する様にしてるのですが、それらの情報を得るのに私が利用してるサイトを紹介してみます。 もちろんこれ以外にも幾つもサイトはあるのですが、ここに紹介したサイトを併用することで殆どの情報は取得することができてます。 （他にお勧めのサイトあったら教えてください） IT勉強会カレンダー IT勉強会カレンダー IT関係の勉強会のカレンダーです。 大小関わらずいろんな勉強会やセミナー、イベント情報が掲載されてます。 情報量で言えば一番多いのではないでしょうか。 ※カレンダー追加方法 Googleアカウントにログインした状態で、右下の[+Googleカレンダー]をクリックすると追加できます 追記：IT勉強会カレンダーは情報量が多いので下記の検索を使うと便利です。 IT 勉強会カレンダー検索 CSS Nite CSS Nite CSSという名
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
HTML5・CSS3時代のweb制作コンセプト
HTML5・CSS3対応のブラウザが増えてきて、制作のコンセプトも変化してきました。 プログレッシブエンハンスメントなどユーザーのブラウザ環境に焦点を置いた制作コンセプトをまとめました。 足りない知識を埋めながら書いたので一部認識が間違ってる箇所があるかも知れませんが、その場合はご指摘頂けると助かります。 Progressive Enhancement Graceful Degradation Polyfill Progressive Enhancement(プログレッシブエンハンスメント) どのブラウザでも基本的な水準のユーザーエクスペリエンスを提供をし、 新しく高水準のブラウザにはCSS3やjsなどでよりリッチなデザインや機能を提供するという考えです。 またProgressive Enhancementには下記の原則があります。 基本的な内容は、すべてのブラウザでアクセス可能である必要
ワイヤーフレームをつくる時に押さえておきたいポイント
どのページをつくるか？ まずトップページ。 体裁が変わるようであれば下層ページも作ります。 また、システムが入るプロジェクトでは画面遷移図としてつくることもあります。 結局のところプロジェクトによります。 競合他者調査 競合他者がどのようなサイト設計を行ってるか参考にします。 他サイトの設計は試行錯誤の結果辿り着いた設計とも言えます。 全く同じ設計にしてしまうのは問題がありますが、 「何故そのような設計にしたか？」を考える事でワイヤーフレームをつくる時の参考になります。 例えば賃貸のサイトではトップの目立つ場所に検索メニューがあります。 賃貸サイトでユーザーが一番求めてるのは賃貸検索ではないか、と考察できます。 （これは誰でも分かる例ですが…） また、ユーザーは過去の体験から次のアクションを予想します。 過去に賃貸サイトを利用した方なら、賃貸サイトで地図を見れば「地域から賃貸を探す」を連想
CSS3のセレクタとjQueryの書き方
E[foo^="bar"] 属性セレクタ 要素名[属性名^="属性値"] 形式の属性セレクタ。 属性の値がbarで始まる要素を対象にスタイルを適用します。 a[href^="http://"]{ color:#F00; } $(function(){ $("a[href^='http://']").css("color","red"); }); E[foo$="bar"] 属性セレクタ 要素名[属性名$="属性値"] 形式の属性セレクタ。 属性の値がbarで終わっている要素を対象にスタイルを適用します。 a[href$="pdf"]{ background:url(pdf.gif) no-repeat; } $(function(){ $("a[href$='pdf']").css({ background:"url(pdf.gif)", backgroundRepeat:"no-repe
macでweb制作するなら入れておきたいQuick Lookプラグイン10選
Quick LookとはMacOS X Leopardから搭載された機能で、画像、テキストファイル、PDF、ムービー、Microsoftの Word、Excel、PowerPoint、Mailの添付ファイル、などシステム内のほとんどのファイルをプレビューできます。 いちいちアプリケーションを立ち上げる事なく内容が見れるので、作業効率もアップします。 またファイルを作成したアプリケーションを持ってなくても使えるのも便利な点です。 デフォルトでも数多くのファイル形式に対応してますが、 プラグインを入れる事でより多くのファイルに対応させる事ができます。 Quick Lookプラグインの使い方 /Library/QuickLook または /Users/ユーザ名/Library/QuickLook/ にプラグインを格納。 Finderを再起動（DockでOption+右クリックの「再度開く」を実行
CSSで角丸を表現する方法をちょっと詳しく書いてみる
CSS3では、border-radiusプロパティを使う事で角丸を表現する事ができます。 この方法を少し詳しく調べてみました。 .radius{ border-radius: 10px; /* CSS3草案 */ } ここの10pxとは角丸の半径の大きさとなります。 ただし、現在のところはCSS3はまだ草案なので、 Safari、Google Chrome では -webkit-border-radius、 Firefox では -moz-border-radius と指定します。 Safari、Chorme用（-webkit-border-radius） 4辺を一括指定する場合は以下のように書きます。 .webkit1{ -webkit-border-radius: 10px; /*一括指定*/ } 4辺を個別に指定する場合は以下のように書きます。 .webkit2{ -webkit-b
seo業者がバックリンクを集める4つの方法
SEO対策は大きく内部対策と外部対策に二分されます。 内部対策は制作会社のみで対応可能、 知識さえあれば素人の方でも対応できます。 外部対策、特にバックリンクは基本的に時間や労力のかかるものです。 しかしseo業者に依頼することで比較的早く、労力もかからずバックリンクを集めることができます。 これだけseoの情報が開示されててもseo業者のニーズがあるのは、 このような理由からでしょう。 では、seo業者はどうやって多くのバックリンクを取得してるのでしょうか。 1.カウンターやアクセス解析、ブログパーツを配布 無料でカウンターやアクセス解析などを配布して、タグ内にリンクを入れます。 <noscript><a href="http://www.xxxx.com" target="_blank">SEO対策</a></noscript> のように<noscript>タグで書かれてるので見た目に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FigmaのVariableの使い方