カテゴリー: Webセミナー

CSS Nite in SAPPORO, Vol.11

CSS Nite in SAPPORO, Vol.112013年11月9日（土）14:00からICCで開催されたCSS Nite in SAPPORO, Vol.11に出席してきました。Web業界の様々な情報を伝える全国各地で開催されているのセミナーの札幌版です。

スマートフォン対応サイトの基本 益子 貴寛（サイバーガーデン）

スマホでのアクセスが増加傾向にあり、端末も膨大な種類が販売されている 表示する画像容量を減らすことでサイト軽減に繋げることができる

CSS Nite in SAPPORO公式サイトのスマートフォン対応事例 口田 聖子（WebbingStudio）

PCとスマホで優先するコンテンツの違いを考慮しWebサイト構築を行う 画像は×2が主流で偶数pxで作る

凝ったレスポンシブWebデザイン実装と画像の最適化 松田 直樹（まぼろし）

スマホではベクター系とビットマップ系両方の画像が使える 各画像形式のメリットデメリットを理解してサイト表示速度向上に努める CSS3やJavascriptにはブロック化したコンテンツの位置を入れ替える機能がある

UX視点からはじめるスマートフォンサイト制作 岡野 マミ（リーグラフィ）

UX（ユーザー体験）デザインとはユーザーのニーズを見つけてデザインする方法 デザインのプロセスを考え、ペルソナやコンセプトダイヤグラムを導入

スマートフォンサイト制作よくあるトラブルの解決方法と回避方法 木村 哲朗（まぼろし） 西畑 一馬（まぼろし）

PCに比べスマホのパフォーマンスは低いため、負荷のかかるプログラム等の導入は注意する ios7は従来機種と仕様が変わっていたり挙動が違うものが存在する

スマートフォンサイト制作のディレクション術 小林 信次（まぼろし） 鷹野 雅弘（スイッチ）

Web制作を進める上で本当にスマホサイトが必要がどうかを考える IEなど古い環境では完全に同じデザインにする必要はない

SaCSS vol.49

SaCSS vol.492013年10月26日（土）18:00から札幌市民ホールで開催されたSaCSS vol.49に出席してきました。北海道でJavascriptのプログラムを中心にフリーランスで活躍されているh2hamさん主催のセミナーです。そのまとめとなります。

@MarlboroLand ：綺麗なリボンを作る方法（Photoshop編）

SaCSS vol.47で作ったリボンをPhotshopで作ってみた時の違いと注意点について説明しました。
  • テクスチャを使用するときにはイメージに合うかどうか確認する
  • レイヤーには不透明度と塗りがあり効果を含むかどうかの違いがある
  • パスのポイント位置によりボケことがあるのでスナップするように設定変更する
  • マスクは3種類あり、作る物にあったマスクを使う
  • レイヤー効果はレイヤーのグループフォルダにも適用できる

@MarlboroLand ：各ソフトによるスライスの方法

AdobeのWebデザイン系用途で使用するソフトのスライス支援機能について説明しました。
  • Slicy：Macのみシェアウェアで今のところ一番評価が高い
  • Cut&Slice me：両方OS対応CS6のみの拡張機能。PNGのみ書き出しに対応
  • PNG EXPRESS：両方OS対応CS5以上のシェアウェア。JPGとPNG書き出しに対応
  • Photoshop CC：最近実装された支援機能。JPEG、PNG、GIF書き出しなど機能が充実している
  • Fireworks Generate Web Assets：両方OS対応CS6以上対応の拡張機能。JPEG、PNG、GIF書き出しに対応
  • Illustrator aislice：両方OS対応CS6以上対応のプラグイン。PNGのみ書き出しに対応

@ma2ken_zawa ：webデザイナーがvirtual boxを使う理由

virtual boxを入れると現環境を汚さず任意OSの環境構築が可能になり、現環境とシームレスに操作できます。また、virtual boxにはIE6～11もあるので各ブラウザの確認作業にも使えます。

@masashi0923 ：黒い画面とお友達になろう

コマンドプロンプトやターミナルの操作ができるようになると、小さい修正作業の効率化や特定のログを取り出し、DBのバックアップなども可能など、作業の幅が広がります。

@kuma_hati ：「ぷろぐらま」の話

WebデザイナーもPGもお互いに相手のイメージを勝手に抱いてるため、大きなズレが生じます。さらにそれら業種の内容を一般人に伝えるのは非常に難しいです。このことを踏まえ、他業種や職種への対応を考えると仕事がよりスムースに進められそうです。

@sase1ya ：Canvasによる画像変形と柔軟体表現

HTML5とJavascript、Canvasを使い画像の変形や柔軟体表現がリアルタイムで出来るようになりました。現在は対応ブラウザが少ないのですが今後こういった表現がより簡単にできるようになりそうです。

@kozyuro ：おじいちゃんとUI

高年齢層の人達はインターネットに関する一般常識に疎いため、文字を大きくする、日本語を使うなど、それらを踏まえたUIデザインを考える必要があります。